jQuery Sprawdź poprawność formularza stop składam

Question

Używam walidacji jQuery do formularza, ale gdy formularz jest sprawdzany, przeładowuje lub przesyła stronę, którą chcę zatrzymać. Używam już event.preventDefault(), ale to nie działa.

Oto mój kod:

$("#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 to funkcja wywołania zwrotnego wbudowana w wtyczkę.

submitHandler (domyślnie: natywna forma przedstawienia):

oddzwaniania do obsługi rzeczywista złożyć, gdy formularz jest ważny. Pobiera formularz jako jedyny argument. Zastępuje domyślne przesłanie. W prawo miejsce do przesłania formularza za pośrednictwem Ajax po sprawdzeniu poprawności.

Od submitHandler automatycznie przechwytuje kliknięcia przycisku Prześlij i tylko pożary na ważnej postaci, nie trzeba innego przedstawienia obsługi, ani nie trzeba używać valid() przetestować formę.

kod można zastąpić:

$("#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

Używam tej podstawowej struktury dla wszystkich moich walidacji JS, który robi to, co Twój pytaniem

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

Nie trzeba e.preventDefault(); i return false; oświadczenie, oni robią to samo.

Answer 3

Wtyczka zapewnia wywołania zwrotne dla prawidłowych i nieprawidłowych prób przesyłania formularzy. Jeśli podasz wywołanie metody submitHandler, formularz nie zostanie automatycznie przesłany do serwera.

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