JQuery在第二次或第三次點擊提交表單 - 驗證

Question

我不明白爲什麼驗證不起作用的第一次點擊，但後來。

我已經將validate插件添加到JS文件，因此表單在點擊後進行驗證。

正如您所見，驗證程序在文檔準備就緒時設置。然後，當表單被點擊時，驗證器檢查表單是否有效。

function submit(form) { 
    var formData = new FormData($(form).get(0)); 
    alert('Thank you for your message! Our support will reply as soon as possible.'); 
    $.ajax({ 
     url: '/contact-us-ajax/', 
     type: 'POST', 
     data: formData, 
     async: true, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (data) { 
      alert('success'); 
     } 
    }); 

    return false; 
} 

$(document).ready(function() { 
    jQuery.validator.setDefaults({ 
     debug: true, 
     success: "valid" 
    }); 
    $("#contact-us-form").submit(function (b) { 
     b.preventDefault(); 
     this_form = $(this); 

     $("#contact-us-form").validate({ 
      rules: { 
       sender: { 
        required: true 
       }, 
       subject: { 
        required: true 
       }, 
       message: { 
        required: true 
       } 
      }, 
      messages: { 
       sender: { 
        required: "Short description can't be empty. Please fill this field." 
       }, 
       subject: { 
        required: "Please choose current language." 
       }, 
       message: { 
        require_from_group: "Either fill this form with a text or attach a file (below)." 
       } 
      }, submitHandler: function (this_form) { 
       submit(this_form); 
      } 
     }); 
    }); 
}); 

Answer 1

我弄清楚問題出在哪裏。第一次點擊後，它只是添加validator，第二次點擊，form已驗證，然後提交。

這裏是工作代碼：

function submit(form) { 
    var formData = new FormData($(form).get(0)); 
    alert('Thank you for your message! Our support will reply as soon as possible.'); 
    $.ajax({ 
     url: '/contact-us-ajax/', 
     type: 'POST', 
     data: formData, 
     async: true, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (data) { 
      alert('success'); 
     } 
    }); 
    return false; 
} 

function attachValidate() { 
     $("#contact-us-form").validate({ 
      rules: { 
       sender: { 
        required: true 
       }, 
       subject: { 
        required: true 
       }, 
       message: { 
        required: true 
       } 
      }, 
      messages: { 
       sender: { 
        required: "Short description can't be empty. Please fill this field." 
       }, 
       subject: { 
        required: "Please choose current language." 
       }, 
       message: { 
        require_from_group: "Either fill this form with a text or attach a file (below)." 
       } 
      }, submitHandler: function (this_form) { 
       submit(this_form); 
      } 
     }); 
} 

$(document).ready(function() { 
    jQuery.validator.setDefaults({ 
     debug: true, 
     success: "valid" 
    }); 
    attachValidate(); 
    $("#contact-us-form").submit(function (b) { 
     b.preventDefault(); 
     $(this).validate(); 
     }); 

});