jQuery xác thực với AJAX trong trình submitHandler, gửi lần nhấp thứ hai?

Question

Tôi mới sử dụng AJAX và đã sử dụng mã từ câu trả lời SO này tại đây jQuery Ajax POST example with PHP để tích hợp với biểu mẫu trên trang web WordPress. Nó hoạt động tốt, nhưng tôi đang gặp rắc rối tích hợp nó với validation jquery

tôi đã cố gắng đặt javascript khỏi trang trên vào submitHandler chức năng dưới đây

$("#my-form").validate({ 
    submitHandler: function(form) { 
    **js from other page** 
    } 
}); 

hình thức của tôi xác nhận trên nhấp chuột đầu tiên. Sau đó, nếu tôi gõ vào đầu vào và gửi không có gì xảy ra, tôi phải bấm vào một lần thứ hai cho biểu mẫu để gửi đúng với AJAX. Dưới đây là một jsfiddle. Bất kỳ trợ giúp được đánh giá cao cảm ơn.

Một jsfiddle mã của tôi nghĩ rằng nó sẽ đăng nhập một lỗi để an ủi từ form.php không liên kết

Answer 1

Công việc của submitHandler là để gửi biểu mẫu, không phải đăng ký một hình thức nộp xử lý sự kiện.

Trình gửi được gọi khi sự kiện gửi biểu mẫu được kích hoạt, trong trường hợp của bạn thay vì gửi biểu mẫu bạn đã đăng ký trình xử lý gửi để khi biểu mẫu gửi sự kiện được kích hoạt lần đầu tiên biểu mẫu không được gửi. khi nó được kích hoạt lần thứ hai đầu tiên sự kiện gửi được xử lý bởi trình xác nhận hợp lệ thì trình xử lý mà bạn đã đăng ký được kích hoạt sẽ kích hoạt yêu cầu ajax.

Trong submitHandler bạn chỉ cần gửi yêu cầu ajax không có cần phải đăng ký xử lý sự kiện

$("#add-form").validate({ 
    submitHandler: function (form) { 
     // setup some local variables 
     var $form = $(form); 
     // let's select and cache all the fields 
     var $inputs = $form.find("input, select, button, textarea"); 
     // serialize the data in the form 
     var serializedData = $form.serialize(); 

     // let's disable the inputs for the duration of the ajax request 
     $inputs.prop("disabled", true); 

     // fire off the request to /form.php 

     request = $.ajax({ 
      url: "forms.php", 
      type: "post", 
      data: serializedData 
     }); 

     // callback handler that will be called on success 
     request.done(function (response, textStatus, jqXHR) { 
      // log a message to the console 
      console.log("Hooray, it worked!"); 
      alert("success awesome"); 
      $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>'); 
     }); 

     // callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown) { 
      // log the error to the console 
      console.error(
       "The following error occured: " + textStatus, errorThrown); 
     }); 

     // callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 
      // reenable the inputs 
      $inputs.prop("disabled", false); 
     }); 

    } 
}); 

Answer 2

Calling $("#add-form").submit(function(){...}) không gửi biểu mẫu. Nó liên kết một trình xử lý cho biết phải làm gì khi người dùng gửi biểu mẫu. Đó là lý do tại sao bạn phải gửi hai lần: lần đầu tiên gọi trình xử lý gửi của trình xác thực hợp lệ, xác thực dữ liệu và chạy hàm của bạn và lần thứ hai gọi trình xử lý gửi mà bạn đã thêm lần đầu tiên.

Không quấn mã bên trong .submit(), chỉ cần thực hiện trực tiếp trong hàm submitHandler: của bạn. Thay đổi:

var $form = $(this); 

tới:

var $form = $(form); 

Bạn không cần event.PreventDefault(), plugin Validate nào đó cho bạn là tốt.

Answer 3

$("#add-form").validate({ 
    submitHandler: function (form) { 
     var request; 
     // bind to the submit event of our form 



     // let's select and cache all the fields 
     var $inputs = $(form).find("input, select, button, textarea"); 
     // serialize the data in the form 
     var serializedData = $(form).serialize(); 

     // let's disable the inputs for the duration of the ajax request 
     $inputs.prop("disabled", true); 

     // fire off the request to /form.php 

     request = $.ajax({ 
       url: "forms.php", 
       type: "post", 
       data: serializedData 
     }); 

     // callback handler that will be called on success 
     request.done(function (response, textStatus, jqXHR) { 
       // log a message to the console 
       console.log("Hooray, it worked!"); 
       alert("success awesome"); 
       $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>'); 
     }); 

     // callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown) { 
       // log the error to the console 
       console.error(
        "The following error occured: " + textStatus, errorThrown); 
     }); 

      // callback handler that will be called regardless 
      // if the request failed or succeeded 
     request.always(function() { 
       // reenable the inputs 
       $inputs.prop("disabled", false); 
     });    

    } 
});