我有一个表单,我需要首先验证表单,然后当我点击预订按钮时,会出现一个显示确认消息的模式。但是,虽然我使用required
验证了输入但是它不起作用和模态出现时没有输入任何数据
<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>