Php Jquery引导模式框无法与wordpress中的检查验证一起使用

我想在调用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>

&时代；
模态头
您的代码中几乎没有错误

提交按钮应位于“表单”内部，而不是外部
按钮类型应为“提交”，而不是按钮
我已编辑了您的代码，请使用以下命令


jQuery（document）.on（'show.bs.modal'，'#myModal'，函数（e）{
jQuery（“代理”表单）。验证({
规则：{
vname：{
要求：正确，
最小长度：8
},
行动：“必需”
},
信息：{
vname：{
必填：“请输入一些数据”，
minlength:“您的数据必须至少包含8个字符”
},
行动：“请提供一些数据”
},
submitHandler:函数（形式）{
var ajaxurl=jQuery（“#ajaxurl”）.val（）；
var name=jQuery（'#inputName'）.val（）；
var phone_number=jQuery（'#phone_number'）.val（）；
var useId=jQuery（“#数据_id”）.val（）；
jQuery.ajax({
url:ajaxurl，
键入：“post”，
数据：{
操作：“添加新代理”，
ag_id:useId，
ag_名称：名称，
电话号码：电话号码
},
成功：功能（响应）{
如果（响应=='Success'）{
jQuery（'#success_message'）.fadeIn（）.html（响应）；
jQuery（“成功消息”）.addClass（“警报成功”）；
setTimeout（函数（）{
jQuery（“成功消息”）.addClass（“警报成功”）；
jQuery（'success_message'）。淡出（“Slow”）；
jQuery（'#myModal'）.modal（'hide'）；
}, 2000); 
}
}
});
返回false；
}
});
});

演示
&时代；
模态头
任何控制台消息？？您确定包含验证js吗？是的，我包含了验证js，但有时它是有效的，但当我使用提交处理程序时，验证和提交处理程序无效。请使用此$（“.modal”）.modal（'show'）；取而代之的是jQuery（'.modal'）。on（'show.bs.modal'，function（e）{您需要删除jQuery（'.modal'）。on（'show.bs.modal'，function（e）{行代码。并分别添加validate。我的意思是：$（“#agent_form”）。validate（{}）请创建一个fiddle