JS on submit =return

[reynold85]

Salve, non ho capito come funziona la validazione dati in un form.
Lo ho usato diverse volte e ho scritto le funzioni di validazione dei dati inseriti ma non ho capito il meccanismo, ovvero non ho capito perchè la validazione restituisce sempre true o false e eprchè bisogne passare questo valore
grazie

[cavicchiandrea]

Non vedendo come hai sviluppato il codice difficile fare ipotesi o congetture, di certo i valori true/false alla funzione e al return non le passi (o perlomeno non dovresti passarli) il true è intrinseco di default nel return il false viene forzato tramite i controlli.

[badaze]

L'evento onsubmit consente di fare controlli sui dati prima di sottometterli. return true, da inviare quando i dati sono giusti, fa scattare lo submit mentre return false ,da inviare quando i dati non sono giusti, non lo esegue. Tutto qua.

[chumkiu]

Mettiamo ordine.

Ammettiamo un codice di questo tipo

<form method="post" action="parseform.php" onsubmit="return checkFields()" id="myForm">
    <input type="text" name="campo1"/>
    <input type="submit" value="invia" />
</form>
<script type="text/javascript">
function checkFields() {
    var myForm = document.getElementById("myForm");
    if(myForm.campo1.value === "") {
         // supponiamo che non lo vogliamo vuoto
         alert("non hai riempito tutti i campi")
         return false;
    } else {
        alert("OK");
        return true;
    }
}
</script>

la chiave è ovviamente il onsubmit="return checkFields()"

Cosa vuol dire?

E' sostanzialmente uno short di un codice di questo tipo:

var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function() {
     return checkFields();
});

Quindi in pratica quello che c'è dentro l'attributo "onsubmit" è quello che c'è dentro la funzione che viene richiamata in quel modo lì.
Che tradotto è: prendi il form myForm, alla sottomissione di esso (on submit) e prima del comportamento di default del browser (che carica la pagina parseform.php) esegui quella funzione.

E qui la chiave: cosa farebbe un "return false" in una funzione di questo tipo? Semplicemente blocca il suddetto comportamento di default del browser. Quindi hai che la pagina parseform.php non viene caricata e di conseguenza blocchi l'invio del form. Ottimo sistema per implementare un metodo di validazione.

Un modo equivalente è il seguente:

var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(event) {
     if(!checkFields()) {
          event.preventDefault();
     }
});

preventDefault è un metodo che "impedisce" il comportamento di default che scatenerebbe l'evento event (in questo caso l'evento submit). E' del tutto equivalente al "return false"

Questo meccanismo vale per qualsiasi evento. Anche i click sulle ancore (<a>).

<a href="pagina.html" onclick="return false">Clicca qui</a>

Quell'onclick previene il comportamento di default del browser a seguito dell'evento, ovvero quello di aprire la pagina pagina.html.

Ovviamente al posto del "false" può andarci una qualsiasi funzione che ritorna true o false. Anche custom.

<a href="pagina.html" onclick="return confirm('Sicuro di voler aprire la pagina?')">Clicca qui</a>