jQuery 유효성 검사 중지 양식 제출

Question

양식에 jQuery 유효성 검사를 사용하고 있지만 양식의 유효성을 검사하면 페이지를 다시로드하거나 제출하여 해당 작업을 중지하고 싶습니다. 이미 event.preventDefault()를 사용하고 있지만 작동하지 않습니다. , 당신이

$('#form').on('submit', function() { 
    // check validation 
    if (some_value != "valid") { 
     return false; 
    } 
}); 

당신은 e.preventDefault();과 return false; 문을 필요가 없습니다 물어 무엇을합니까 내 모든 JS 검증이 기본 구조를 사용

$("#step1form").validate(); 
$("#step1form").on("submit", function(e){ 
    var isValid = $("#step1form").valid(); 

    if(isValid){ 
     e.preventDefault(); 
     // Things i would like to do after validation 
     $(".first_step_form").fadeOut(); 
     if(counter == 3){ 
      $(".second_step_summary").fadeIn(); 
      $(".third_step_form").fadeIn(); 
      $(".third_inactive").fadeOut(); 
     }else if(counter < 3){ 
      $(".second_step_form").fadeIn(); 
      $(".third_inactive").fadeIn(); 
     } 

     $(".first_step_summary").fadeIn(); 
     $(".second_inactive").fadeOut(); 
    } 

    return false; 
}); 

Answer 1

submitHandler은 플러그인에 내장 된 콜백 함수입니다.

submitHandler (기본값 : 기본 양식을 제출) : 양식이 유효 할 때 실제 제출 처리하기위한

콜백. 유일한 인수로 양식을 가져옵니다. 기본 제출을 대체합니다. 유효성을 확인한 후 Ajax를 통해 양식을 제출할 장소. submitHandler 이후

가 자동으로 유효한 양식에 제출 버튼 만 화재의 클릭을 캡처, 당신은 또 다른 핸들러를 제출하거나 양식을 테스트하기 위해 valid()를 사용해야 할 필요가 없습니다. 당신은`e.preventDefault()`에 잘못된 장소를 가지고

$("#step1form").validate({ 
    submitHandler: function(form) { 
     // Things I would like to do after validation 
     $(".first_step_form").fadeOut(); 
     if(counter == 3){ 
      $(".second_step_summary").fadeIn(); 
      $(".third_step_form").fadeIn(); 
      $(".third_inactive").fadeOut(); 
     }else if(counter < 3){ 
      $(".second_step_form").fadeIn(); 
      $(".third_inactive").fadeIn(); 
     } 
     $(".first_step_summary").fadeIn(); 
     $(".second_inactive").fadeOut(); 
     return false; // block the default submit action 
    } 
}); 

Answer 2

:

여기 내 코드입니다 그들은 똑같은 일을합니다.

Answer 3

플러그인은 유효하거나 유효하지 않은 양식 제출 시도에 대한 콜백을 제공합니다. submitHandler 콜백을 제공하면 양식이 자동으로 서버에 제출되지 않습니다.

$("#step1form").validate({ 
    submitHandler : function() 
    { 
     // the form is valid 
     $(".first_step_form").fadeOut(); 
     if(counter == 3){ 
      $(".second_step_summary").fadeIn(); 
      // etc 
     } 
    } 
});