Créa-blog

Ressources pour développeur web

Tester et valider les entrées d’un formulaire en javascript

Accueil › Javascript › Tester et valider les entrées d’un formulaire en javascript

Tester et valider un formulaire en javascript est une étape importante dans le développement web. Elle permet de s’assurer que les données saisies par l’utilisateur sont correctes et complètes avant d’être envoyées au serveur. Cela permet d’éviter des erreurs, de fiabiliser les données collectées et d’améliorer l’expérience utilisateur.

JavaScript offre un large éventail de possibilités pour valider des formulaires. Dans ce tutoriel, nous allons explorer les différentes techniques de validation JavaScript en les illustrant d’exemples concrets.

La structure HTML du formulaire

Commençons par créer un formulaire HTML de base avec quelques champs obligatoires :

<form id="monFormulaire" action="submit.php" method="post">
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name" placeholder="Votre nom" required>

    <label for="email">Email :</label>
    <input type="email" id="email" name="email" placeholder="Votre eMail" required>

    <label for="age">Âge :</label>
    <input type="number" id="age" name="age" placeholder="Votre âge">

    <button type="submit">Soumettre</button>
</form>

Dans cet exemple, nous avons trois champs : Nom, eMail et Tel. Les attributs required assurent que ces champs doivent être remplis avant que le formulaire puisse être soumis.

HTML5 introduit plusieurs attributs nativement dédiés à la validation de formulaires. Ces attributs permettent de définir des règles de validation simples mais efficaces, comme l’obligation de remplir un champ (required), le formatage d’un email <input type="email"> ou la saisie de données numériques <input type="number">.

Les navigateurs modernes prennent en charge ces attributs et affichent des messages d’erreur par défaut si les règles ne sont pas respectées. Cependant, la validation HTML5 ne permet pas de réaliser des contrôles plus complexes. C’est là que JavaScript entre en jeu.

Ecouter les événements du formulaire en javascript

JavaScript offre une grande flexibilité pour étendre les capacités de validation des formulaires. Vous pouvez ainsi créer vos propres règles de validation, gérer les messages d’erreur de manière personnalisée et effectuer des actions en fonction des données saisies.

Pour valider un formulaire en JavaScript, il faut d’abord écouter les événements qui déclenchent la soumission du formulaire ou la modification de ses champs. Les événements les plus courants sont :

  • submit : Déclenché lorsque le formulaire est soumis
  • input : Déclenché à chaque modification d’un champ de saisie
  • change : Déclenché lorsque la valeur d’un champ de sélection ou de liste déroulante change
const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  // Valider le formulaire ici
  event.preventDefault(); // Empêcher la soumission par défaut
});

form.addEventListener('input', (event) => {
  // Valider le champ concerné ici
});

form.addEventListener('change', (event) => {
  // Valider le champ concerné ici
});

Styles pour les Messages d’Erreur

Le script javascript que nous allons coder par la suite indiquera si le formulaire contient des erreurs. Ajoutons quelques styles CSS pour rendre ces messages d’erreur plus visibles et esthétiques :

.error {
    color: red;
    font-size: 0.8em;
    margin-top: 5px;
}

Ces styles seront utilisés pour afficher les messages d’erreur pour les champs invalides du formulaire. Le script javascript ajoutera cette classe .error à chaque message d’erreur.

Tester et valider les entrées du formulaire en javascript

Une fois que vous avez identifié les événements à écouter, vous pouvez effectuer les contrôles de validation souhaités. JavaScript met à votre disposition de nombreuses méthodes pour vérifier les données saisies :

  • trim() : Supprimer les espaces avant et après une chaîne de caractères
  • toLowerCase() : Convertir une chaîne de caractères en minuscules
  • toUpperCase() : Convertir une chaîne de caractères en majuscules
  • test() : Tester une chaîne de caractères contre une expression régulière
  • match() : Rechercher une correspondance exacte d’une expression régulière dans une chaîne de caractères
  • isNaN() : Vérifier si une valeur est un nombre non numérique
  • parseFloat() : Convertir une chaîne de caractères en nombre flottant
  • parseInt() : Convertir une chaîne de caractères en nombre entier

Vérifier si un champ est vide en javascript

Si l’utilisateur essaie de soumettre le formulaire sans remplir le champ Nom, un message d’erreur s’affiche grâce à l’attribut HTML required de l’élément du formulaire. Ce système peut être facilement contourné. Par exemple, si l’utilisateur entre juste un espace et rien d’autre, cela suffira. Javascript va donc combler toutes ses failles en affichant un message d’erreur : Veuillez saisir votre nom..

const form = document.getElementById('myForm');
// On récupère la valeur du champ input name
const nameInput = document.getElementById('name');

// Lancement de la validation 
form.addEventListener('submit', function(event) {
    let errors = [];

    // Si le champ "name" est vide
    if (nameInput.value.trim() === '') {
        // On ajoute une erreur à la constante errors
        errors.push('Veuillez saisir votre nom.');
    }
    
    // Gestions des erreurs
    if (errors.length > 0) {
        // Si il y a une erreur :
        // On empeche l'envoi du formulaire
        event.preventDefault();
        // On appelle la fonction pour afficher les erreurs
        displayErrors(errors);
    }

});

    
// Fonction d'affichage des erreurs
function displayErrors(errors) {
    // On créé une balise div
    const errorContainer = document.createElement('div');
    // On lui ajoute la classe .error
    errorContainer.classList.add('error');

    // On fait une boucle pour afficher toutes les erreurs
    errors.forEach(function(error) {
        // On créé un élément paragraphe p
        // à chaque tour de boucle, donc pour chaque erreur
        const errorMessage = document.createElement('p');
        errorMessage.textContent = error;
        errorContainer.appendChild(errorMessage);
    });

    // On affiche les erreurs à la fin du formulaire 
    form.appendChild(errorContainer);
}

Allons plus loin en ajoutant une nouvelle condition pour vérifier que le nom contient au moins 3 caractères :

// Si le champ "name" est vide
if (nameInput.value.trim() === '') {
    // On ajoute une erreur à la constante errors
    errors.push('Veuillez saisir votre nom.');
} else if (nameInput.value.trim().length < 3) {
    // Le nom doit avoir au minimum 3 caractères
    errors.push('Le nom doit contenir au moins 3 caractères.');
}

Vérifier la validité d'une adresse mail en javascript

La balise <input type="email"> vérifie qu'il s'agit bien d'une adresse mail. Cependant, à l'instar de champ nom, celle-ci connait également des failles. Par exemple, l'adresse : mail@mail sera considérée comme une adresse mail valide par la vérification HTML. Javascript va de nouveau remédier à ce problème.

Commençons par créer un fonction qui vérifie la validité d'une adresse mail :

function isValidEmail(email) {
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return re.test(email);
}

Cette expression régulière couvre une gamme plus large de cas valides tout en rejetant les formats incorrects. Cependant, même cette version peut avoir des limitations avec des cas extrêmes. Nous allons maintenant appeler cette fonction dans notre script :

const form = document.getElementById('myForm');
// On récupère la valeur du champ input email
const emailInput = document.getElementById('email');

// Lancement de la validation 
form.addEventListener('submit', function(event) {
    let errors = [];

    // Validité de l'adresse mail
    if (emailInput.value.trim() === '') {
        // Si le champ est vide
        errors.push('Veuillez saisir votre email.');
    } else if (!isValidEmail(emailInput.value)) {
        // Si l'adresse n'est pas valide
        errors.push('Veuillez saisir une adresse email valide.');
    }
    
    // Gestions des erreurs
    if (errors.length > 0) {
        // On empeche l'envoi du formulaire
        event.preventDefault();
        // On appelle la fonction pour afficher les erreurs
        displayErrors(errors);
    }

});

Vérifier une valeur numérique en javascript

Pour vérifier si la valeur est bien une valeur numérique valide. Vous pouvez utiliser les méthodes suivantes :

  • isNaN() : Cette fonction JavaScript vérifie si une valeur est un nombre non numérique. Donc si ce n'est pas un nombre.
  • parseInt() : Cette fonction convertit une chaîne de caractères en un nombre entier. Vous pouvez l'utiliser pour vérifier si la valeur saisie est un entier positif.
  • Plage d'âge : Vous pouvez également définir une plage d'âge minimum et maximum valide.
// Plage d'age valide
const ageMin = 18;
const ageMax = 100;

// Verification de l'entrée numérique
const ageEntier = parseInt(ageInput.value);
if (isNaN(ageEntier) || ageEntier < ageMin || ageEntier > ageMax) {
    // L'âge n'est pas dans la plage valide
    afficherErreur('L\'âge doit être compris entre ' + ageMin + ' et ' + ageMax + ' ans');
}

Le code javascript final

const form = document.getElementById('myForm');
// On récupère la valeur du champ input name
const nameInput = document.getElementById('name');
// On récupère la valeur du champ input email
const emailInput = document.getElementById('email');
// On récupère la valeur du champ input age
const ageInput = document.getElementById('age');
 

// Lancement de la validation 
form.addEventListener('submit', function(event) {
    let errors = [];
    
    alert(nameInput.value.trim());

    // Si le champ "name" est vide
    if (nameInput.value.trim() === '') {
        // On ajoute une erreur à la constante errors
        errors.push('Veuillez saisir votre nom.');
    } else if (nameInput.value.trim().length < 4) {
        // Le nom doit avoir au minimum 3 caractères
        errors.push('Le nom doit contenir au moins 3 caractères.');
    } 
    
    // Validité de l'adresse mail
    if (emailInput.value.trim() === '') {
        // Si le champ est vide
        errors.push('Veuillez saisir votre email.');
    } else if (!isValidEmail(emailInput.value)) {
        // Si l'adresse n'est pas valide
        errors.push('Veuillez saisir une adresse email valide.');
    }
    
    // Plage d'age valide
    const ageMin = 18;
    const ageMax = 100;

    // Verification de l'entrée numérique
    const ageEntier = parseInt(ageInput.value);
    if (isNaN(ageEntier) || ageEntier < ageMin || ageEntier > ageMax) {
        // L'âge n'est pas dans la plage valide
        errors.push('L\'âge doit être compris entre ' + ageMin + ' et ' + ageMax + ' ans');
    }
    
    // Gestions des erreurs
    if (errors.length > 0) {
        // On empeche l'envoi du formulaire
        event.preventDefault();
        // On appelle la fonction pour afficher les erreurs
        displayErrors(errors);
    }

});

// Fonction de validation de l'email
function isValidEmail(email) {
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return re.test(email);
}
    
// Fonction d'affichage des erreurs
function displayErrors(errors) {
    // On récupère la liste des erreurs si elle existe
    const elementsError = document.querySelectorAll('.error');
    elementsError.forEach(element => {
        element.remove();
    });
    
    
    // On créé une balise div
    const errorContainer = document.createElement('div');
    // On lui ajoute la classe .error
    errorContainer.classList.add('error');

    // On fait une boucle pour afficher toutes les erreurs
    errors.forEach(function(error) {
        // On créé un élément paragraphe p
        // à chaque tour de boucle, donc pour chaque erreur
        const errorMessage = document.createElement('p');
        errorMessage.textContent = error;
        errorContainer.appendChild(errorMessage);
    });

    // On affiche les erreurs à la fin du formulaire 
    form.appendChild(errorContainer);
}

La validation javascript est-elle suffisante ?

La validation par JavaScript côté client est une étape importante, mais elle n'est pas suffisante à elle seule pour garantir la sécurité et l'intégrité des données soumises. Voici pourquoi :

Facilité de contournement :
Les utilisateurs peuvent désactiver JavaScript dans leur navigateur ou utiliser des outils pour contourner les validations côté client. Cela signifie que des données non validées ou malveillantes peuvent toujours être soumises au serveur.

Sécurité :
La validation côté client ne protège pas contre les attaques malveillantes telles que l'injection SQL ou les scripts intersites (XSS). Les données doivent toujours être validées et nettoyées côté serveur avant d'être utilisées ou stockées.

Fiabilité :
Des erreurs de validation peuvent se produire si différents navigateurs interprètent JavaScript de manière différente. La validation côté serveur assure une vérification cohérente et fiable.

Pour assurer une validation complète et sécurisée, il est essentiel de valider les données côté serveur en PHP.

La validation d'un formulaire en javascript est un aspect crucial du développement Web. En utilisant HTML, CSS et JavaScript, vous pouvez créer des expériences utilisateur plus fluides et plus sécurisées. En suivant les meilleures pratiques de validation de formulaire, vous pouvez garantir que les données collectées sont précises et utiles.

Articles relatifs

  1. Le format JSON en Javascript pour des données structurées
    Le JSON en Javascript est un élément essentiel du développement web moderne. Il offre une méthode simple et efficace pour échanger des données structurées entre les serveurs et les clients,...
  2. API localStorage en javaScript : Le guide complet
    L’API localStorage est une fonctionnalité fournie par les navigateurs web qui permet aux développeurs web de stocker des données localement dans le navigateur d’un utilisateur. Cette API permet de stocker...
  3. Les service workers : la mise en cache des fichiers d’un site web
    Les service workers sont de puissants outils pour rendre les sites web disponibles hors-ligne et améliorer leurs performances en mettant en cache les ressources importantes. Qu’est-ce qu’un service worker ?...
  4. L’API de géolocalisation en HTML5 : Le guide complet
    La géolocalisation en HTML5 offre une méthode puissante pour obtenir les coordonnées géographiques d’un utilisateur à l’aide de son navigateur web. Cette fonctionnalité permet de créer des expériences web plus...