La vérification d'un formulaire peut être poussée grâce au JavaScript. Cette validation peut se faire avant ou après la validation HTML

Les données peuvent être vérifiées, dans l'ordre, :

lors de la frappe (événements key...)
lorsque le champ est quitté (événement blur)
lors de la soumission

onblur

L'attribut onblur traite l'événement lié au fait que le champ perd le focus

Cliquez d'abord dans le champ (avant de le quitter)

  <form onsubmit="alert('Réaction au submit !');return false;">
    <p>
      <input required="required" onblur="alert('Ce champ a été quitté');" />
      <button type="submit" onclick="alert('Réaction au click !');">Afficher</button>
    </p>
  </form>

Il suffit de remplacer ces "alertes" par des appels de fonction. La validation du formulaire pourrait alors être très poussée. Surtout lorsqu'on sait qu'un champ peut réagir à de nombreux autres événements, tel que onkeypress, onmouseover, ...

Voir : Tous les événements

onsubmit

  <form onsubmit="alert('Réaction au submit !');return false;">
    <p>
      <input required="required" />
      <button type="submit">Afficher</button>
    </p>
  </form>

Il suffit de remplacer cette "alerte" par un appel de fonction qui pourra faire tous les tests souhaités. La validation du formulaire pourrait ainsi être poussée.

La vérification peut même être faite avant la vérification HTML ...

onclick

  <form onsubmit="alert('Réaction au submit !');return false;">
    <p>
      <input required="required" />
      <button type="submit" onclick="alert('Réaction au click !');">Afficher</button>
    </p>
  </form>

Exemple complet

Après la validation faite par le navigateur (sans taper du code JavaScript), on peut pousser plus loin la vérification (en tapant du code JavaScript dans une fonction). Par exemple, en remplaçant alert('Correctement rempli !'); par isDataOK();

Et, si la fonction isDataOK() retourne true, lorsque les données sont valides, il suffit de taper :

<form onsubmit="return isDataOK();">

Nous verrons bientôt comment écrire une fonction.

Extrait du code HTML de ce fichier :

        <form onsubmit="return isDataOK();">
          ...
        </form>

  <script src="validationJS.js"></script>
  </body>
</html>

Fichier jour1b.js

function isDataOK(){

  var prenom=document.getElementById("Prenom").value;

  if(prenom=="Thibaut") {
    alert("Les données seront envoyées et le formulaire effacé.");
    return true;
  }
  else {
    alert("Données NON envoyées !\nVeuillez indiquer 'Thibaut' comme prénom.");
    return false;
  }

}

Le code de cette fonction est fourni sans explication.
À la fin de ce mini-cours, vous comprendrez ce code.

type="button"

Si les données ne seront pas envoyées à un serveur (type="submit") - mais serviront à un script - et que la validation HTML, faite automatiquement par le navigateur, n'est pas souhaitée (préférant la faire en JavaScript), le bouton de type="button" est alors recommandé.

Hormis l'attribut maxlength évalué par le navigateur lors de la frappe, les contraintes HTML (required="required", max="...", min="...", ...), évaluées par le navigateur lors de la demande de soumission, ne seront alors pas utilisées (puisqu'il n'y a pas d'événement de type="submit").

Quant au type de données admissibles (notamment type="number"), cela dépendra du navigateur (qui pourrait interdire la frappe de caractères n'entrant pas dans la composition d'un nombre, tels que la plupart des caractères alphabétiques).