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(){})本身验证该表单

＆＃13;

$(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;
    });
})

＆＃13;

<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>

＆＃13;

Answer 2

是的，您可以使用以下代码验证表单

$("subBtn").on('click', function() {
   $("#add_name").valid();
});

验证不在bootstrap数据模式中工作

2 个答案: