Validation de formulaire en Javascript avec onsubmit

Comment vérifier les entrées dans les champs de formulaire avec Javascript et onsubmit ?

Nous allons voir dans cet article, comment vérifier les entrées dans nos formulaires et renvoyé une erreur si l’utilisateur n’a pas entré les bonnes informations.

Le formulaire HTML

Notre formulaire sera un formulaire HTML basique.
Nous allons donc créer une page HTML simple avec notre formulaire.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
    <title>JS Formulaires</title>
</head>
<body>
    <form action="./" onsubmit="return verif()">
        <input type="text" id="prenom" placeholder="Prenom"><br>
        <small>Prenom: Max 25 caractres</small><br>
        <input type="text" id="nom" placeholder="Nom"><br>
        <small>Nom: Max 30 caractres</small><br>
        <input type="text" id="age" placeholder="Age"><br>
        <small>Age: Chiffres uniquement</small><br>
        <button type="submit">Submit</button>
        <p id="response" style="color:red;"></p>
    </form>
</html>

J’ai ajouté les ID aux ‘input’ afin de pouvoir les sélectionner avec Javascript.
Le ‘<p>’ à la fin nous servira à renvoyer un message d’erreur ou de succès.
Le ‘onsubmit’ dans notre form va nous servir à appeler notre fonctions Javascript qui va vérifier nos entrées.
Si la fonction retourne ‘false’, notre formulaire ne s’enverra pas, dans le cas contraire, si la fonction return ‘true’, le formulaire s’enverra alors.

Ajoutons le Javascript pour vérifier nos entrées !

Avec le JS, nous allons maintenant vérifier nos entrées, nous allons donc tout d’abord ajouter nos balises script, déclaré notre fonction, et sélectionner nos entrées.

<script>
        function verif(){
            let prenom = document.getElementById('prenom');
            let nom = document.getElementById('nom');
            let age = document.getElementById('age');
            let response = document.getElementById('response');
        }
</script>

Nos variables sont maintenant déclaré et assigné à nos entrées.
Voyons maintenant les vérifications à faire.
Dans le formulaire HTML, nous avons mis les consignes à respecter dans nos entrées dans une balise ‘small’.
Nous allons donc vérifier nos entrées en respectant nos consignes.

Vérification JS

Nous allons mettre tout ça dans notre fonction verif() :

if(prenom.value == "" || nom.value == "" || age.value == ""){
        response.innerHTML = "Veuillez remplir tous les champs !<br>";
        return false;
    }
    if(prenom.value.lenght &gt; 25 || nom.value.lenght &gt; 30 || isNaN(age.value)){
       response.innerHTML += "Votre Prnom doit contenir 25 caractre 
         maximum, votre nom doit en contenir 30 maximum, votre ge doit 
         tre en chiffre.<br>"
       return false;
    }

    response.innerHTML = "Bonjour " + prenom.value + " " + nom.value + ", 
         vous avez " + age.value + " ans !"; 
    return false;

Ici nous avons un premier ‘if’ qui à pour rôle de vérifier si tous les champs sont bien remplis, auxquels cas on renvoi le message d’erreur.

Le deuxième ‘if’ quant à lui, va vérifier si la longueur des champs est bonne.
Si elle est en dessous de 25 pour le Nom ou en dessous de 30 pour le prénom ou si âge n’est pas un nombre (isNan : is Not a Number), nous envoyons donc un message d’erreur.

Il est important de retourner FAUX si nous voulons pas envoyer le formulaire.
Si toutes les vérifications sont bonnes nous pourrons renvoyer TRUE.

Ici à la fin je renvoi un simple message en répétant les informations obtenus et je retourne FALSE pour que le message s’affiche.

Voilà, vous savez maintenant utiliser ‘onsubmit’, n’hésitez pas à creuser sur le net pour savoir toutes les vérifications possible.

Au prochain Tuto !
Bye ! 🙂

N’hésitez pas à laisser des commentaires si vous avez des questions, ou si vous avez des idées pour les prochains tuto 🙂 !

By root

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.