javascript - 验证在 Bootstrap 数据模式中不起作用

Question

验证不工作。我正在使用 bootstrap Modal 来显示用户输入表单并有一个确认按钮。我已经提交了第一个同时调用验证和模态的表单。

<form class="form-phone" name="frm" method="post" enctype="multipart/form-data" id="add_name" action="">
    <input type="text" class="form-control" id="ex_model" name="ex_model" required>
    <input type="text" class="form-control" id="ex_serial" name="ex_serial" required>                              
    <button style="width:100% ; margin-top:15px; border-radius:0; font-weight:bold;" type="button"  id="subBtn" class="btn btn-success" data-toggle="modal" data-target="#myModal"  >GET OFFER</button>                   
</form>

这是脚本

<script >   
   $(document).ready(function(){  
        $('#subBtn').click(function() {             
            $("#add_name").validate({
                rules: {
                    ex_model: {
                        required: true,
                        minlength: 8
                    },
                    ex_serial: "required"
                },
                messages: {
                    ex_model: {
                        required: "Please enter  modaldata",
                        minlength: "Your data must be at least 8 characters"
                    },      
                    ex_serial: "Please enter some data"
                }   
            });                 
        });   
    });
</script>    

Answer 1

您不需要在提交按钮点击事件上验证此表单，而是可以在 $(document).ready(function(){}) 本身上验证该表单

$(function(){
    $("#add_name").validate({
        rules: {
            ex_model: {
                required: true,
                minlength: 8
            },
            ex_serial: "required"
        },
        messages: {
            ex_model: {
                required: "Please enter  modaldata",
                minlength: "Your data must be at least 8 characters"
            },      
            ex_serial: "Please enter some data"
        }
    })

    $("#subBtn").on("click", function(){
        if($("#add_name").valid()){
            //alert("success");
            $("#myModal").modal("show");
        } else {
            //alert("Values are not entered");
            //whatever you want to do when values are not entered
        }
        return false;
    });
})

<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

<form class="form-phone" name="frm" method="post" enctype="multipart/form-data" id="add_name" action="">
        <input type="text" class="form-control" id="ex_model" name="ex_model" required>
        <input type="text" class="form-control" id="ex_serial" name="ex_serial" required>                              
        <button style="width:100% ; margin-top:15px; border-radius:0; font-weight:bold;" type="button"  id="subBtn" class="btn btn-success" >GET OFFER</button>                   
</form>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
       <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
       </div>
       <div class="modal-body">
           <p>Some text in the modal.</p>
       </div>
       <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       </div>
   </div>
</div>
</div>