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.




    
    
    JS Formulaires


    

Prenom: Max 25 caractères

Nom: Max 30 caractères

Age: Chiffres uniquement

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.


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 !
"; return false; } if(prenom.value.lenght > 25 || nom.value.lenght > 30 || isNaN(age.value)){ response.innerHTML += "Votre Prénom doit contenir 25 caractère maximum, votre nom doit en contenir 30 maximum, votre âge doit être en chiffre.
" 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 e-mail ne sera pas publiée.

*

code