Formulaires

Récupérer un formulaire et ses champs

On peut récupérer le formulaire comme les autres éléments avec document.getElementById();

let champ = document.getElementById("mon-champ");
let valeurChamp = champ.value;
let valeurChamp = document.getElementById("mon-champ").value;

On peut aussi utiliser document.forms qui contient la liste de tous les formulaires de la page. On pourra même récupérer un champ spécifique d’un formulaire de cette manière :

let champ = document.forms['id_du_formulaire'].elements['name_du_champ'];
let valeurChamp = document.forms['id_du_formulaire'].elements['name_du_champ'].value;

Valider un formulaire

Avec un événement

let formulaire = document.getElementById("formulaire");
formulaire.addEventListener('submit', function(e) {
    let valid = true;

    //ici on vérifie les champs
    //on met valid à false en cas d'erreur
    //on affiche des messages d'erreur

    //si valid = false, alors on empêche l'envoi du formulaire.
    //formulaire.checkValidity() sert à vérifier le formulaire avec la validation HTML5 (les champs type=email etc...)
    if(!valid || !formulaire.checkValidity()){
        e.preventDefault();
    }
})

Avec l’attribut onSubmit

let formulaire = document.getElementById("formulaire");
formulaire.onsubmit = function(e) {
    let valid = true;

    //ici on vérifie les champs
    //on met valid à false en cas d'erreur
    //on affiche des messages d'erreur

    //si valid = false, alors on empêche l'envoi du formulaire.
    //formulaire.checkValidity() sert à vérifier le formulaire avec la validation HTML5 (les champs type=email etc...)
    if(!valid || !formulaire.checkValidity()){
        return false;
    }
    return true;
}

NOTE : On préfèrera souvent valider directement les champs du formulaire sur “change” ou “blur” pour ne pas avoir à attendre que le visiteur clique sur “Envoyer” pour lui afficher les erreurs.

Vérifier les valeurs des champs

    let nom = document.getElementById("name"); //mon champ à vérifier
    let erreurName = document.getElementById("erreur-name"); //une div à côté du champ dans laquelle je mettrait le message d'erreur.

    if(nom.value === "") {
        nom.style.borderColor = 'red'
        erreurNom.style.color = 'red'
        erreurNom.innerHTML = 'Ce champ est requis.'
        valid = false
    }else if(nom.value.length < 3){
        nom.style.borderColor = 'red'
        erreurNom.style.color = 'red'
        erreurNom.innerHTML = 'Ce champ doit être rempli avec au moins trois caractères.'
        valid = false
    }else{
        nom.style.borderColor = 'green'
        erreurNom.innerHTML = ''
    }

Validation avec Regex

Les Regex (Expressions Régulières) sont un langage qui permet de décrire le format que doit avoir un texte. On s’en sert souvent pour valider les adresses e-mail ou les numéros de téléphone.

Vous trouverez souvent sur le net des regex toutes prêtes.

    let phoneRegex = /^(?:(?:\+|00)33|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/
    let emailRegex = /[a-zA-Z0-9._]*@[a-zA-Z0-9-]*\.[a-z]*/gm

    let email = document.getElementById("email");

    if(emailRegex.test(email.value) === false){
        console.log("Mail invalide");
    }

Astuce : Vous pouvez tester une regex en live sur https://regex101.com/ . Vous y trouverez aussi une librairie de regex toutes prêtes.