问题
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> </p>
<p> </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