jQuery convalida con AJAX in submitHandler, invia al secondo clic?

Question

Sono nuovo di AJAX e ho utilizzato il codice da questa risposta SO qui jQuery Ajax POST example with PHP da integrare con un modulo su un sito WordPress. Funziona bene, ma sto avendo problemi integrandola con la convalida jQuery

ho provato mettendo il javascript dalla pagina sopra in funzione submitHandler sotto

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

Mia forma convalida al primo scatto. Quindi se digito nell'input e invio non succede nulla, devo fare clic una seconda volta per il modulo per inviare correttamente con AJAX. Di seguito è un jsfiddle. Qualsiasi aiuto è apprezzato grazie.

Un jsfiddle del mio codice pensano che farà registrare un errore di consolare dal form.php non è legata

Answer 1

Il lavoro del submitHandler è quello di inviare il modulo, non registrare una forma submit gestore di eventi.

Il submitHandler viene chiamato quando viene attivato l'evento di invio formm, nel tuo caso invece di inviare il modulo si registrava un gestore di invio in modo tale che quando l'evento di invio del modulo viene attivato per la prima volta il modulo non viene inviato. quando viene attivato per la seconda volta, l'evento di invio viene elaborato dal validatore, quindi viene attivato l'handler registrato che attiva la richiesta Ajax.

Nella submitHandler non resta che ha inviato la richiesta Ajax non c'è bisogno di registrare il gestore di eventi

$("#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(){...}) non inviare il modulo. Esso associa un gestore che dice cosa fare quando l'utente invia il modulo. Ecco perché devi inviare due volte: la prima volta richiama il gestore di invio del plugin valido, che convalida i dati ed esegue la tua funzione, e la seconda volta richiama il gestore di invio che hai aggiunto la prima volta.

Non inserire il codice all'interno di .submit(), è sufficiente farlo direttamente nella funzione submitHandler:. Cambio:

var $form = $(this); 

a:

var $form = $(form); 

Non è necessario event.PreventDefault(), il plugin di convalida che fa per voi.

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

    } 
});