JQueryは2回目または3回目のクリックでフォームを送信します - Validate

Question

最初のクリックでは検証が機能しないのはなぜですか？

JSファイルにvalidateプラグインを追加しましたので、クリックするとフォームが検証されます。

ご覧のとおり、バリデータはドキュメントの準備ができたら設定されます。次に、フォームがクリックされると、バリデーターはフォームが有効かどうかをチェックします。

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が追加され、2回目のクリックで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(); 
     }); 

});