Twitter引导模式出现时没有验证

时间:2015-07-31 15:10:19

标签: twitter-bootstrap bootstrap-modal

我有一个表单,我需要首先验证表单,然后当我点击预订按钮时,会出现一个显示确认消息的模式。但是,虽然我使用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>&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>

0 个答案:

没有答案