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> 

내 자바 스크립트 기능이에 양식을 제출 확인합니다. SubmitHandler 콜백 해고되지 않은 전송 버튼을 클릭에 필드에 데이터를 입력 한 후

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

.

Submit 단추를 두 번 클릭하면 SubmitHandler 콜백이 실행되고 기능이 작동합니다.

Answer 1

먼저 debug: true은 항상 양식 제출을 금지하므로 게시 한 코드는 설명하는 문제에 대해 의미가 없습니다.

두 번째로 .validate()을 click 처리기로 감싸고 있습니까? 그렇다면 문제를 완전히 설명합니다. .validate() 메서드는 에만 사용되며 플러그인을 초기화하고 click 처리기로 래핑하면 안됩니다. 그렇지 않으면 첫 번째 클릭으로 플러그인이 초기화되고 두 번째 클릭이 정상적으로 작동합니다.