JQuery가 두 번째 또는 세 번째 클릭시 양식을 제출합니다. 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을 추가하고 두 번째 클릭시 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(); 
     }); 

});