Validation avant soumission

Formulaire

Explication...

Premièrement, lorsque la personne clique sur le bouton "Soumettre" ou appuie sur la touche "entrée", le formulaire déclenche la soumission du formulaire. C'est là qu'intervient le code à l'intérieur de l'attribut onsubmit="". Il est exécuté juste avant la soumission. Si on écrit "return true;" il sera envoyé, si on écrit "return false;" la soumission s'arrêtera. Remplacer le true|false par une fonction est beaucoup plus pratique. On peut mettre dans cette fonction des conditions pour regarder chaque champ de notre formulaire. Remarquer que dans mon exemple, j'envoie un paramètre, le mot-clé "this". Il me permet de manipuler le formulaire et d'accéder facilement à ces champs.

Source

Code JavaScript

<script type="text/javascript">

/** 
 * Cette fonction valide le formulaire et le soumet si tout est conforme
 * @pForm  Référence sur le formulaire
 * @return Vrai si tout est conforme ou faux
 */
function valider( pForm ) {
  // ici on regarde si un champ n'est pas vide
  if ( pForm.elements['nomChamp'].value == '' ) {
    alert( 'Veuillez remplir le champ s.v.p' );
    pForm.elements['nomChamp'].focus();
    return false;
  }
  return true; // tout c'est bien passé, on soumet le formulaire
}
</script>

Code HTML

<form action="index.php" onsubmit="return valider(this);" method="post">
 <input type="text" name="nomChamp" value="" size="10" >
 <input type="submit" value="Soumettre">
</form>