Invia modulo dopo aver chiamato e.preventDefault ()

Sto facendo qualche semplice convalida del modulo qui e sono rimasto bloccato su un problema molto di base. Ho 5 coppie di campi per nome e antipasto (per una registrazione cena). L’utente può inserire 1-5 coppie, ma un antipasto deve essere selezionato se è presente un nome. Codice:

http://jsfiddle.net/eecTN/1/

Name: Entree:
Name: Entree:
Name: Entree:
Name: Entree:
Name: Entree:
 // Prevent form submit if any entrees are missing $('form').submit(function(e){ e.preventDefault(); // Cycle through each Attendee Name $('[name="atendeename[]"]', this).each(function(index, el){ // If there is a value if ($(el).val()) { // Find adjacent entree input var entree = $(el).next('input'); // If entree is empty, don't submit form if ( ! entree.val()) { alert('Please select an entree'); entree.focus(); return false; } } }); $('form').unbind('submit').submit(); }); 

Il messaggio di errore funziona, ma sta inviando il modulo ogni volta. So che c’è qualcosa di sbagliato in questa linea:

 $('form').unbind('submit').submit(); 

… ma non sono sicuro di cosa dovrei fare.

La soluzione più semplice è semplicemente non chiamare e.preventDefault() meno che la convalida fallisca effettivamente. Sposta quella linea all’interno .unbind().submit() if interna, e rimuovi l’ultima riga della funzione con .unbind().submit() .

Utilizzare il nativo element.submit() per aggirare il preventDefault nel gestore jQuery e notare che l’istruzione return restituisce solo da ogni ciclo, non restituisce dal gestore eventi

 $('form').submit(function(e){ e.preventDefault(); var valid = true; $('[name="atendeename[]"]', this).each(function(index, el){ if ( $(el).val() ) { var entree = $(el).next('input'); if ( ! entree.val()) { entree.focus(); valid = false; } } }); if (valid) this.submit(); }); 

Il problema è che, anche se vedi l’errore, il tuo return false influisce sul callback del metodo .each() … quindi, anche se c’è un errore, raggiungi la linea

 $('form').unbind('submit').submit(); 

e il modulo è presentato.

Ad esempio, è necessario creare una variabile, validated e impostarla su true. Quindi, nel callback, invece di return false , set validated = false .

Finalmente…

 if (validated) $('form').unbind('submit').submit(); 

In questo modo, solo se non ci sono errori, verrà inviato il modulo.

 $('form').submit(function(e){ var submitAllow = true; // Cycle through each Attendee Name $('[name="atendeename[]"]', this).each(function(index, el){ // If there is a value if ($(el).val()) { // Find adjacent entree input var entree = $(el).next('input'); // If entree is empty, don't submit form if ( ! entree.val()) { alert('Please select an entree'); entree.focus(); submitAllow = false; return false; } } }); return submitAllow; }); 

Scusa per il ritardo, ma proverò a rendere la forma perfetta 🙂

Aggiungerò i passaggi di convalida del conteggio e verificheremo ogni volta non .val() . Controlla la .length , perché penso che sia il modello migliore nel tuo caso. Ovviamente unbind funzione unbind .

Il mio jsFiddle

Naturalmente il codice sorgente:

 // Prevent form submit if any entrees are missing $('form').submit(function(e){ e.preventDefault(); var formIsValid = true; // Count validation steps var validationLoop = 0; // Cycle through each Attendee Name $('[name="atendeename[]"]', this).each(function(index, el){ // If there is a value if ($(el).val().length > 0) { validationLoop++; // Find adjacent entree input var entree = $(el).next('input'); var entreeValue = entree.val(); // If entree is empty, don't submit form if (entreeValue.length === 0) { alert('Please select an entree'); entree.focus(); formIsValid = false; return false; } } }); if (formIsValid && validationLoop > 0) { alert("Correct Form"); return true; } else { return false; } }); 

Perché non associare l’evento del pulsante di invio al modulo stesso? sarebbe molto più facile e più sicuro se si vincolano i pulsanti rispetto al modulo stesso, poiché il modulo verrà inviato per lo più a meno che non si usi preventDefault()

 $("#btn-submit").on("click", function (e) { var submitAllow = true; $('[name="atendeename[]"]', this).each(function(index, el){ // If there is a value if ($(el).val()) { // Find adjacent entree input var entree = $(el).next('input'); // If entree is empty, don't submit form if ( ! entree.val()) { alert('Please select an entree'); entree.focus(); submitAllow = false; return false; } } }); if (submitAllow) { $("#form-attendee").submit(); } }); 
  
Name: Entree:
Name: Entree:
Name: Entree:
Name: Entree:
Name: Entree: