Validity - Un plugin jQuery de validation de formulaires avancé

Validity est un plugin jQuery complet permettant d'ajouter de la validation sur les champs de vos formulaires du côté client.

Proposer de la validation côté client peut être intéressant pour vos visiteurs. Ils n'auront pas à attendre la validation serveur et le refresh des données pour se rendre compte qu'il manque des infos ou que certaines sont erronées.

Et ils ne seront pas frustrés d'avoir rempli un formulaire complet qui se réaffichera vide à cause d'une petite erreur (Bon sang, rechargez les données de vos formulaires s'il y'a des erreurs, il n'y'a rien de mieux pour perdre des inscriptions!).

Validity est un plugin simple à utiliser et complet.

Vous trouverez un grand nombre de validateurs prêts à emploi:

• Champ requis
• Champ doit correspondre à une regex
• Champ validé par Ajax
• Champ compris entre deux valeurs
• Champ égal, inférieur ou supérieur à une valeur
• Taille maximum ou minimum d'un champ
• Etc.

Voici comment le mettre en place:

      <form method="get" action="simple.htm">
            Number of Vehicles:
            <input type="text" id="vehicles" name="vehicles" title="Vehicle Count" />
            <br /><br />
            Date of birth:
            <input type="text" id="dob" name="dob" title="Birthday" />
            <br /><br />
            <input type="submit" />
        </form>

Et côté javascript:

$("form").validity(function() {
    $("#vehicles")                      // The first input:    
        .require()                          // Required:
        .match("number")                    // In the format of a number:
        .range(4, 12);                      // Between 4 and 12 (inclusively):
    
    $("#dob")                           // The second input:
        .require()                          // Required:
        .match("date")                      // In the format of a date:
        .lessThanOrEqualTo(new Date());     // In the past (less than or equal to today):
});

Plusieurs exemples sont disponibles dans la documentation du plugin.

Les messages pourront bien sûr être personnalisés avec du CSS.

Site Officiel