Valider ses formulaires simplement avec Validate Js

Valider ses formulaires simplement avec Validate Js

 

form

En plus des vérif html5 avec la classe « required » notamment ou les input type « email » ou « password » , on peut appliquer une vérification dynamique en js avec le plugin Validate Js.

Telechargez le, placez sur votre site dans le header normalement ou si c’est un wordpress avec wp_enqueue_script:

<?php wp_enqueue_script( 'untitled-3', get_template_directory_uri() . "/public/js/jquery.validate.js"); ?>
   

Imaginons ensuite qu’on ait un formulaire du genre:

    <form id="contact" method="post" action="contact.php" class="ajax">

            <ul>
                <li>
                    <label></label>
                    <input placeholder="Nom" type="text" name="nom"/>
                </li>                    
                <li>
                    <label></label>
                    <input placeholder="Prenom" type="text" name="prenom"/>
                </li>
                <li>
                    <label></label>
                    <input placeholder="Mail" type="text" name="email"/>
                </li>
                <li>
                    <label></label>
                    <input placeholder="Telephone" type="text" name="telephone"/>
                </li>

L’ID du formulaire ici est contact.C’est cet id que l’on va cibler dans les paramètres du plugin :

jQuery(document).ready(function() {
 jQuery.validator.messages.required = 'Ce champ est requis.';
 jQuery.validator.messages.email = 'Veuillez saisir une adresse mail valide.';
 jQuery.validator.messages.number = 'Veuillez saisir un nombre.';    
     jQuery("#contact").validate({
  
        rules: {
        
       nom: {
            required: true
           
        },
        prenom: {
            required: true
        
        },
        email: {
          required: true,
          email: true
        },
        telephone: {
        required: true,
        number: true
        } 
}
});
 });   
  

c’est une manière de faire, il y en a d’autres.Je définis les messages d’erreur à la suite de la fonction: jQuery.validator.messages.

pour required, number ou email je définis un message spécifique.

J’applique la fonction .validate à ma div « contact », puis je définis les « rules » à l’intérieur de ma fonction validate.Chaque item « nom » « prenom » etc correspond au ‘name’ de mes inputs.
Le plugin, genère une classe .error qu’on peut ensuite styliser dans notre css :

Au clic sur le bouton submit, les erreurs apparaissent si les champs ne sont pas correctement remplis

form2

Si l’on remplit mal les champ dont les rules sont « number » ou ‘mail » on a les messages correspondants:

form3

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.