jQuery Xác thực biểu mẫu dừng gửi

Question

Tôi đang sử dụng jQuery xác thực biểu mẫu, nhưng khi biểu mẫu được xác thực, nó tải lại hoặc gửi trang tôi muốn dừng hành động đó. Tôi đã sử dụng event.preventDefault(), nhưng nó không hoạt động.

Đây là mã của tôi:

$("#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 là chức năng gọi lại được tích hợp vào plugin.

submitHandler (mặc định: hình thức bản địa nộp):

Callback để xử lý thực tế nộp khi biểu mẫu là hợp lệ. Nhận được biểu mẫu làm đối số duy nhất. Thay thế gửi mặc định. Phải địa điểm để gửi biểu mẫu qua Ajax sau khi được xác thực.

Kể từ khi submitHandler tự động nắm bắt được click vào nút gửi và chỉ cháy trên một hình thức hợp lệ, bạn không cần một trình xử lý, cũng không làm bạn cần phải sử dụng valid() để kiểm tra mẫu.

Bạn mã có thể được thay thế bằng:

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

tôi sử dụng cấu trúc cơ bản này cho tất cả các xác nhận JS của tôi, mà làm những gì bạn hỏi

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

Bạn không cần e.preventDefault(); và một tuyên bố return false;, họ làm điều tương tự.

Answer 3

Plugin cung cấp gọi lại cho các lần gửi biểu mẫu hợp lệ và không hợp lệ. Nếu bạn cung cấp gọi lại submitHandler thì biểu mẫu sẽ không tự động được gửi đến máy chủ.

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