jQuery验证只在第二次点击

Question

HTML

<form class="form" name="request_more_details" class="new_leads_form_data" action="http://pr.com:3000/leads" accept-charset="UTF-8" method="post" novalidate="novalidate"> 

    <label class="ghost-text" for="primary_lead_name">Full Name</label> 
    <input maxlength="50" class="form-control fullName" placeholder="Full Name" title="Full Name" id="primary_lead_name" type="text" name="leads_form_data[name]"> 

    <label class="ghost-text" for="primary_lead_email">Email</label> 
    <input class="form-control email" placeholder="Email" title="Email" id="primary_lead_email" type="email" name="leads_form_data[email]"> 

    <label class="ghost-text" for="primary_lead_phone">Phone </label> 
    <input class="form-control phone" placeholder="Phone " title="Phone" id="primary_lead_phone" type="tel" name="leads_form_data[phone]" aria-required="true" aria-invalid="true"> 

    <input type="submit" name="commit" value="Contact Agent" class="submit btn btn-block btn-primary margin-bottom lead-form-submit" id="primary_lead_submit"> 

</form> 

下面是我的JavaScript函数提交表单。

$('.form').validate({ 
      debug: true, 
      // custom function for keyup event 
      onkeyup: function(element) { 
       var modifiedClass = 'modified'; 
       var $parent = $(element).parent(); 
       if ($(element).val()) { 
       $parent.addClass(modifiedClass); 
       } else { 
       $parent.removeClass(modifiedClass); 
       } 
      }, 
      rules: { 
       "leads_form_data[email]": { 
        required: true, 
        email: true, 
        pattern:/^.+@.+\..+$/ 
       }, 
       "leads_form_data[phone]": { 
        required: isPhoneRequired(), 
        phoneUS: true 
       } 
      }, 
      messages: { 
       "leads_form_data[name]": "Please enter your full name", 
       "leads_form_data[email]": { 
        required: "Please enter your email", 
        email: "Please enter a valid email", 
        pattern: "Please enter a valid email address" 
       }, 
       "leads_form_data[phone]": { 
        required: "Please enter your phone number", 
        phoneUS: "Please enter a valid phone number" 
       }, 

      }, 
      // error handling 
      errorPlacement: function(error, element) {  
       error.insertAfter(element); 
      }, 
      submitHandler: function(form){ 
       //Handling ajax call    
      }).settings.ignore = ':not(select:hidden, input:visible, textarea:visible)'; 
    }; 

在点击提交按钮SubmitHandler后没有触发数据输入字段。

第二次单击提交按钮SubmitHandler回调命中并且功能起作用。

Answer 1

首先，debug: true将始终阻止表单提交，因此您发布的代码对您描述的问题没有意义。

其次，你是否在click处理程序中包装.validate()？如果是这样，那完全解释了这个问题。 .validate()方法仅用于初始化插件，不应将其包装在click处理程序中。否则，第一次点击会初始化插件，第二次点击会正常运行。