Validation de formulaire en Javascript

Il y a plusieurs méthode pour valider nos formulaire en Javascript. Nous allons nous en tenir à deux méthodes qui se rapproche de ce qu'on fait déjà en utilisant l'action submit du formulaire. L'avantage majeur d'utiliser Javascript est que ça nous permet de faire une validation beaucoup plus précise et efficace.

onsubmit

La première méthode est d'utiliser onsubmit dans la balise form pour appeler une fonction Javascript lors du "submit" du formulaire. La fonction doit être appeler de la façon suivante et retourner true ou false :

HTML

<form action="traitement.php" method="post" onsubmit="return ValidationOnSubmit()">

Javascript

function ValidationOnSubmit() 
{
    let formValide = false;

    // Traitement de validation

    return formValide;
}

Un retour de la valeur false va empêcher le submit et une valeur true va au contraire l'autoriser.

preventDefault

La seconde méthode est d'utiliser la méthode preventDefault associée au formulaire pour bloqué le comportement du "submit" et ensuite faire notre validation. Un fois la validation effectuée, on peut relancer un submit depuis notre script. La fonction de validation sera appelé quand l'événement submit de notre formulaire sera déclenché. On utilisera un addEventListener pour ce faire :

monFormulaire.addEventListener('submit', function ValidationFormulaire(e) 
{
    // Annule le comportement par défaut du submit
    e.preventDefault();

    let formValide = false;

    // Traitement de validation

    if (formValide) {
        // On relance un submit
        monFormulaire.submit();
    }
});

Références

• https://developer.mozilla.org/fr/docs/Learn/Forms/Form_validation
• https://www.tutorialspoint.com/javascript/javascript_form_validations.htm
• https://www.javascripttutorial.net/javascript-dom/javascript-form-validation/
• https://www.w3schools.com/js/js_validation.asp

Valider un texte selon une expression régulière

On peut utiliser une expression régulière pour tester si un texte correspond à un certain format, comme une adresse courriel par exemple. Un variable ou un string l'expression régulière suivie de la fonction test(monTexte) avec le texte en paramètre retournera true si le texte correspond au motif de l'expression.

function estCourriel(valeur) {
    const regex_email = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    return regex_email.test(valeur);
}

Pour vous aider avec les regex : https://regexr.com/