Question

我想在调用ajax请求之前检查引导程序模态表单验证，为此我使用了以下脚本，但是验证工作不正常，并且在填写表单并提交表单submitHandler后未调用或ajax调用为不起作用。

脚本

jQuery(document).ready(function(){
    jQuery('.modal').on('show.bs.modal', function (e) {
        jQuery("#agent_form").validate({
            rules: {
              vname: {
                required: true,
                minlength: 8
              },
              action: "required"
            },
            messages: {
              vname: {
                required: "Please enter some data",
                minlength: "Your data must be at least 8 characters"
              },
              action: "Please provide some data"
            },
            submitHandler: function(form) {                 
                    var ajaxurl = jQuery("#ajaxurl").val();
                    var name =jQuery('#inputName').val();
                    var phone_number =jQuery('#phone_number').val();
                    var useId =jQuery("#data_id").val();                    
                    jQuery.ajax({
                        url : ajaxurl,
                        type : 'post',
                        data : {
                            action : 'add_new_agent',
                            ag_id : useId,
                            ag_name : name,
                            phone_number:phone_number
                        },
                        success : function( response ) {
                            if(response =='Success'){
                                jQuery('#success_message').fadeIn().html(response);  
                                jQuery("#success_message").addClass("alert alert-success");
                              setTimeout(function(){  
                                jQuery("#success_message").addClass("alert alert-success");
                                jQuery('#success_message').fadeOut("Slow"); 
                                  jQuery('#myModal').modal('hide'); 
                              }, 2000); 
                            }
                        }
                    });
                    return false;
            }
        });
    }); 
});

HTML代码...

<div class="modal fade" id="myModal" 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 id="error_message" class="ajax_response1" style="float:left"></div>
            <div id="success_message" class="ajax_response1" style="float:left"></div>
        </div>

        <!-- Modal Body -->
            <div class="modal-body">
                <form  role="form" id="agent_form">
                    <input id="ajaxurl" name="action" value="<?php echo admin_url( 'admin-ajax.php' );?>" type="hidden">
                    <input type="hidden" name="data_id" id="data_id">
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input name="vname" type="text" class="form-control" id="inputName" placeholder="Enter your name" required/>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Phone Number</label>
                        <input type="phone_number" class="form-control" id="phone_number" placeholder="Enter your email"/>
                    </div>                    
                </form>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary submitBtn" id="add_agent" >SUBMIT</button>        
            </div>
      </div>
    </div>
  </div>

验证无效，submitHandler也无法调用。

Answer 1

您的代码中几乎没有错误，

“提交”按钮应该位于“表单”内部，而不是外部
按钮类型应为“提交”而非按钮

我已经编辑了您的代码，请使用以下

jQuery(document).on('show.bs.modal','#myModal', function (e) {
        jQuery("#agent_form").validate({
            rules: {
              vname: {
                required: true,
                minlength: 8
              },
              action: "required"
            },
            messages: {
              vname: {
                required: "Please enter some data",
                minlength: "Your data must be at least 8 characters"
              },
              action: "Please provide some data"
            },
            submitHandler: function(form) {                 
                    var ajaxurl = jQuery("#ajaxurl").val();
                    var name =jQuery('#inputName').val();
                    var phone_number =jQuery('#phone_number').val();
                    var useId =jQuery("#data_id").val();                    
                    jQuery.ajax({
                        url : ajaxurl,
                        type : 'post',
                        data : {
                            action : 'add_new_agent',
                            ag_id : useId,
                            ag_name : name,
                            phone_number:phone_number
                        },
                        success : function( response ) {
                            if(response =='Success'){
                                jQuery('#success_message').fadeIn().html(response);  
                                jQuery("#success_message").addClass("alert alert-success");
                              setTimeout(function(){  
                                jQuery("#success_message").addClass("alert alert-success");
                                jQuery('#success_message').fadeOut("Slow"); 
                                  jQuery('#myModal').modal('hide'); 
                              }, 2000); 
                            }
                        }
                    });
                    return false;
            }
        });
    });

<!-- The below scripts and styles are for demo purpose, no need to include in your code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"  rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<!-- The above scripts and styles are for demo purpose, no need to include in your code -->

<button data-toggle="modal" data-target="#myModal">demo</button>

<div class="modal fade" id="myModal" 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 id="error_message" class="ajax_response1" style="float:left"></div>
            <div id="success_message" class="ajax_response1" style="float:left"></div>
        </div>

        <!-- Modal Body -->
        
            <div class="modal-body">
                <form role="form" id="agent_form">
                    <input id="ajaxurl" name="action" value="<?php echo admin_url( 'admin-ajax.php' );?>" type="hidden">
                <input type="hidden" name="data_id" id="data_id">
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input name="vname" type="text" class="form-control" id="inputName" placeholder="Enter your name" required/>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Phone Number</label>
                        <input type="phone_number" class="form-control" id="phone_number" placeholder="Enter your email"/>
                    </div>   
                    <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary submitBtn" id="add_agent" >SUBMIT</button>        
            </div>
            </form>
            </div>
      </div>
    </div>
  </div>

jQuery Bootstrap模态框不适用于Wordpress中的检查验证

1 个答案: