Client-Side Validation formulaire avec jQuery
Novembre 6, 2008 par Philip Beel · 1 Commentaire 
Ce tutoriel va vous montrer comment valider un formulaire de contact simple en utilisant le plugin bassistance jQuery validation. Cela vous permettra de valider un formulaire avant qu'elle a été soumise. Voir la démo ici.
Étape 1 - le formulaire
Ce même formulaire est présenté sur le Tutorial Ajax Formulaire de contact. Alors, si vous souhaitez étendre la forme originale, ce tutoriel doit vous permettre de le faire assez facilement.
Pour commencer nous avons besoin d'un nouveau fichier, nous l'appellerons contact.html, en elle, nous allons créer notre formulaire comme ceci.
<div id="container">
<form id="contactForm" method="" action="">
<p>
<label for="name">Name </label>
<input id="name" name="name" />
</p>
<p>
<label for="email">E-Mail </label>
<input id="email" name="email" />
</p>
<p>
<label for="message">Your Message </label>
<textarea id="message" name="message" rows="4" cols="30" >
</textarea>
</p>
<p>
<input class="submit" type="submit" value="submit"/>
</p>
</form>
</div>
Nous avons maintenant une forme simple avec 2 champs et une zone de texte, que nous allons valider.
Étape 2 - Le Plugin
Le plug-in que nous utilisons peuvent être téléchargés à partir de là, nous aurons également besoin d'une copie de jQuery, qui peut-être téléchargé ici. Maintenant que vous avez les fichiers dont nous avons besoin de les attacher à notre fichier contact.html, comme ceci.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
S'il vous plaît noter que sa très important que vous appelez jQuery en premier sinon le cadre ne fonctionnera pas.
Étape 3 - Le Code
Le poids du code lui-même est très léger, check it out
//initiate validator on load
$(function() {
// validate contact form on keyup and submit
$("#contactForm").validate({
//set the rules for the field names
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 2
},
},
//set messages to appear inline
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
message: "Please enter your message"
}
});
});
Tout ce que nous faisons ici est appelez une fonction onload ", qui lance la validation du formulaire à l'aide valider. Le plugin nécessite la validation vous franchissez un paramenters années.
règles - vous permet de spécifier les noms de champ que vous voulez agir sur, dans notre cas, nous avons utilisé le nom, l'email et message. À l'intérieur de cela, nous sommes en précisant, si le domaine est requise ou non, en passant soit vraie ou fausse, nous voulons valider tous les domaines, de sorte que tous sont marqués comme étant vrai. Le paramètre suivant est longueur_min, qui .. vous l'avez deviné, vous permet de fixer un nombre minimal de caractères à saisir.
message - vous permet de définir un message spécifique pour un domaine particulier, si vous choisissez de ne pas fixer un messge, un seul défaut est fourni, qui dira quelque chose comme "ce champ est obligatoire"
Étape 4 - Tidy It Up
Pour rendre les messages d'avertissement apparaissent plus sensible que nous pouvons ajouter un peu de style, bien que ce n'est pas impérative. Vous remarquerez que lorsque mai un message d'erreur s'affiche sa enveloppé dans une classe appelée erreur rendant simple pour nous d'ajouter quelques informations de style comme ceci
.error {
color: red;
font: 12pt verdana;
padding-left: 10px
}Et c'est tout ce qu'il faut faire. Téléchargez le code et essayer par vous-même ici
Utiles, mais bien sûr vous avez toujours besoin d'avoir la validation côté serveur également.