jQuery sprawdzić z AJAX w submitHandler, przesyła na drugim kliknięciu?

Question

Jestem nowy w AJAX i użyłem kodu z tej odpowiedzi SO tutaj jQuery Ajax POST example with PHP do integracji z formularzem na stronie WordPress. To działa dobrze, ale mam problemy integracji z walidacji jquery

Próbowałem umieszczenie JavaScript na stronie powyżej do funkcji submitHandler poniżej

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

moja forma sprawdza się na pierwszym kliknięciem. Następnie, jeśli wpisuję dane wejściowe i nic się nie dzieje, muszę kliknąć drugi raz, aby formularz został poprawnie przesłany za pomocą AJAX. Poniżej znajduje się jsfiddle. Jakakolwiek pomoc się przyda, dzięki.

jsfiddle mojego kodu pomyślałem będzie to błąd logowania do konsoli od form.php nie jest związana

Answer 1

Zadaniem submitHandler jest przesłać formularz, aby nie rejestrować formą przedstawienia obsługi zdarzeń.

Funkcja submitHandler jest wywoływana, gdy zostanie wywołane zdarzenie formm submit, w twojej sprawie zamiast przesłać formularz, w którym rejestrowałeś procedurę przesyłania, więc gdy po raz pierwszy formularz zostanie wysłany, formularz nie zostanie przesłany. kiedy jest on uruchamiany po raz drugi, najpierw przesyłane jest zgłoszenie przez walidatora, a następnie uruchamiany program obsługi, który uruchamia żądanie ajax.

W submitHandler po prostu trzeba wysłał żądania ajax nie ma potrzeby, aby zarejestrować obsługi zdarzeń

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

Wywołanie $("#add-form").submit(function(){...}) nie wysłać formularz. Łączy program obsługi, który mówi, co zrobić, gdy użytkownik przesyła formularz. Dlatego musisz przesłać dwa razy: po raz pierwszy wywołuje procedurę obsługi przesyłania poprawek wtyczki, która sprawdza poprawność danych i uruchamia twoją funkcję, a po raz drugi wywołuje procedurę obsługi przesyłania, którą dodałeś za pierwszym razem.

Nie koduj wewnątrz kodu .submit(), zrób to bezpośrednio w swojej funkcji submitHandler:. Zmiana:

var $form = $(this); 

do:

var $form = $(form); 

Nie trzeba event.PreventDefault(), wtyczka validate robi to za Ciebie.

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); 
     });    

    } 
});