Twitter bootstrap modal appear without validation

怎甘沉沦 提交于 2019-12-25 00:32:02

问题


I have a form in which I need to first validate the form then as I click book button a modal showing the confirmation message should appear.However although I validated the input using required but it is not working and modal appear without entering any data

<div class="zindex">
    <div class="row row-centered">
    <form name="getestimate_form" id="getestimate_form" action="#" method="post">
        <div class="row">
            <div class="col-lg-5 col-centered form-group">
                <div id="imaginary_container"> 
                    <div class="input-group stylish-input-group">
                        <input id="pickup" type="text" class="form-control my-size" name="pickup" maxlength="100"  placeholder="PickUP" aria-required="true" required >
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-map-marker"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 col-centered form-group">
                <div id="imaginary_container"> 
                    <div class="input-group stylish-input-group">
                        <input id="dropoff" name="dropoff" type="text" class="form-control my-size"  placeholder="Drop Off" maxlength="100" required >
                        <span class="input-group-addon">
                         <span class="glyphicon glyphicon-map-marker"></span>
                        </span>
                    </div>
                </div>
            </div> 
        </div>  
        <div class="row row-centered">        
            <button type="submit" class="btn btn-info btn-lg custom " data-toggle="modal" data-target="#book-modal"> BOOK </button>      
            <a href="#" class="btn btn-info btn-lg custom"> QUOTES </a>
        </div>
    </form>
    </div>
    <!-- Searchbar end -->
        <p>&nbsp;</p>
        <p>&nbsp;</p>
</div>

JS

<script>
    $("#pickup").change(function(){ 
        if($(this)[0].checkValidity()) { 
            //check for validity of the DOM element, thats why we use [0] 
            $('#book-modal').modal(); // if so run the modal window 
        } 
    });
</script>

来源:https://stackoverflow.com/questions/31749560/twitter-bootstrap-modal-appear-without-validation

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!