checkbox validation

Printable View

12-09-2014, 08.40.12
giacomofabbian

checkbox validation

Ciao a tutti sto facendo uno script di controllo che mi permette di bloccare il submit se l'utente non ha selezionato nemmeno un checkbox, peró non va e naturalmente non mi da errori in console.

Se vedete degli errori dite pure, grazie a tutti.

Codice HTML:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>checked demo</title> <style> div { color: red; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"/></script> </head> <body> <form> <p> <input type="checkbox" name="newsletter" value="Hourly" > <input type="checkbox" name="newsletter" value="Daily"> <input type="checkbox" name="newsletter" value="Weekly"> <input type="checkbox" name="newsletter" value="Monthly"> <input type="checkbox" name="newsletter" value="Yearly"> <input type='submit'> </p> </form> <div></div> <script> var countChecked = function() { var n = $( "input:checked" ).length; if(n === 0){ event.preventDefault(); alert (n); } return; }; $( "input[type=submit]" ).on( "submit", countChecked ); </script> </body> </html>
12-09-2014, 11.17.26
NLSweb

Codice HTML:

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#vai").hide(); var countChecked = function() { var n = $( "input:checked" ).length; if(n>0){ $("#vai").show(); }else{ $("#vai").hide(); } }; countChecked(); $( "input[type=checkbox]" ).on( "click", countChecked ); }); </script> </head> <body> <input type="checkbox" name="newsletter" value="Daily"> <input type="checkbox" name="newsletter" value="Weekly"> <input type='submit' id="vai"> </body> </html>
13-09-2014, 01.41.31
giacomofabbian

Si ma dove è il problema nel mio script???
13-09-2014, 10.22.21
javascripter

Citazione:

Originalmente inviato da giacomofabbian

Si ma dove è il problema nel mio script???

Nel tuo script il problema è event.
Usi una variabile non definita all'interno della tua funzione callback.
Non vedi nessun errore perché su input[type=submit] non c'è alcun listener dell'evento submit; è l'elemento form che ha quel listener. Quindi quella funzione non viene mai invocata e nessun errore ti viene mostrato.

Correggi il tuo script così:

Codice:

var countChecked = function(event) { // se necessario, usa un selettore più specifico (tutte le checkbox figlie di un form con id X per esempio) if($("input:checked").length == 0) { event.preventDefault(); return false; } return true; }; // anche qui usa un selettore più specifico (il form con id X) $( "form" ).on( "submit", countChecked);
13-09-2014, 15.22.06
giacomofabbian

Spiegazione perfetta. Grazie javascripter, ultima domanda:

che differenza c'è nel mettere lo script nel head o nel body?? Perchè sopra nel codice di NLSweb è su head.
13-09-2014, 18.10.13
javascripter

Se inserisci uno script nel tag <head>, il browser interpreterà il codice prima che l'intero documento HTML e DOM siano pronti.
In questo modo non potrai accedere direttamente agli elementi (risulteranno ancora indefiniti), ma dovrai usare un evento DOMReady opurre onload.
Infatti NLSWeb ha racchiuso tutto il codice all'interno di

Codice:

$(document).ready(function() {/* codice */} );

Subito prima la chiusura del tag body (</body>), questo problema non si pone perché tutto il documento è pronto, dom è pronto e puoi accedere agli elementi senza wrap vari.

Insomma, se ti stai chiedendo qual è il metodo corretto da usare, la risposta è che dipende da quello di cui hai bisogno (dom, ajax, etc.).
Tradizionalmente, gli script vanno in head, anche per non mescolare tutti i tag. Nel tuo caso si può evitare.