LiveValidation

Tout d’abord, au cas où vous vous poseriez la question, l’exemple de page d’accueil consiste en 2 validations - – "Présence" pour être sur qu’elle soit remplie, et "Format" pour vérifier que la valeur entrée contienne ‘hello’ dans tous les cas. Voilà comment procéder...

Dire “salut”:

Premièrement, le champ est configuré en tant qu’objet de LiveValidation, en le passant comme premier argument. Dans cet exemple le "validMessage" a été annulé par l’inclusion d’un objet option, et l’option d’attente est configurée à 500ms, pour le faire valider seulement 500ms après que l’usager ait arrêté sa saisie clavier :

var sayHello = new LiveValidation( "sayHello", { validMessage: "Ok !", wait: 500 } );

La validation Présence est alors ajoutée, et cet exemple fournit un message d’annulation :

sayHello.add( Validate.Presence,
{ failureMessage: "Ne m'ignorez pas, je veux être votre ami !" } );

Finalement, le Format de validation est ajouté, avec un modèle d’expression régulière pour contre valider, encore une fois avec un message d’annulation pour cet exemple :

sayHello.add( Validate.Format,
{ pattern: /^salut$/i, failureMessage: "Alors, vous n'avez pas encore dit 'salut' ?" } );

"Presence" va échouer si aucune valeur n’est entrée dans le champ..

Compléter le champ et cliquer :

var f1 = new LiveValidation('f1');
f1.add( Validate.Presence );

"Format" va échouer si la valeur ne correspond pas avec l’expression régulière.

Il devra contenir le répertoire "live" dans tous les cas :

var f2 = new LiveValidation('f2');
f2.add( Validate.Format, { pattern: /live/i } );

Ce type de validation concerne les nombres. Il peut traiter les nombres scientifiques (exemple 2E3 correspondant au nombre 2000), les décimaux (les nombres qui contiennent une virgule) et les nombres relatifs (nombres positifs ou négatifs) qu’il s’agisse de valeurs et/ou de paramètres.

var f3 = new LiveValidation('f3');
f3.add( Validate.Numericality );

var f4 = new LiveValidation('f4');
f4.add( Validate.Numericality, { onlyInteger: true } );

var f5 = new LiveValidation('f5');
f5.add( Validate.Numericality, { is: 2000 } );

var f6 = new LiveValidation('f6');
f6.add( Validate.Numericality, { minimum: 2000 } );

var f7 = new LiveValidation('f7');
f7.add( Validate.Numericality, { maximum: 2000 } );

var f8 = new LiveValidation('f8');
f8.add( Validate.Numericality, { minimum: 2000, maximum: 2003 } );

var f9 = new LiveValidation('f9');
f9.add( Validate.Numericality, { minimum: 2000, maximum: 2003, onlyInteger: true } );

La longueur concerne le nombre de caractères d’une valeur, vous pouvez déterminer plusieurs critères de validation. Vérifier que la valeur correspond à une valeur précise, qu’elle est plus petite ou égale à une longueur maximale, qu’elle est plus grande ou égale à une longueur minimale ou qu’elle s’intègre dans un intervalle précis.

var f10 = new LiveValidation('f10');
f10.add( Validate.Length, { is: 4 } );

var f11 = new LiveValidation('f11');
f11.add( Validate.Length, { minimum: 4 } );

var f12 = new LiveValidation('f12');
f12.add( Validate.Length, { maximum: 4 } );

var f13 = new LiveValidation('f13');
f13.add( Validate.Length, { minimum: 4, maximum: 8 } );

Inclusion vous permet de valider parmi une liste de valeurs autorisées. Vous pouvez exiger une correspondance partielle ou totale.

var f14 = new LiveValidation('f14');
f14.add( Validate.Inclusion, { within: [ 'vache' , 'pigeon', 'girafe' ] } );

var f15 = new LiveValidation('f15');
f15.add( Validate.Inclusion, { within: [ 'vache' , 'pigeon', 'girafe' ], partialMatch: true } );

Les exclusions permettent d’approuver une liste de valeur non autorisée. On peut faire une correspondance exacte ou partielle.

var f16 = new LiveValidation('f16');
f16.add( Validate.Exclusion, { within: [ 'vache' , 'pigeon', 'girafe' ] } );

var f17 = new LiveValidation('f17');
f17.add( Validate.Exclusion, { within: [ 'vache' , 'pigeon', 'girafe' ], partialMatch: true } );

L’acceptation permet de confirmer qu’une case à cocher a été cochée.

Exemple : J’accepte que ‘LiveValidation’ est la validation de mes rêves:

var f18 = new LiveValidation('f18');
f18.add( Validate.Acceptance );

Ceci est utilisé pour vérifier que la valeur du champ de confirmation correspond à celle d’un autre champ. On l’utilise le plus couramment pour les mots de passe, comme démontré ci-dessous, mais fonctionnement tout aussi bien sur d’autres types de champs.

Entrez un mot de passe :
Confirmez un mot de passe :

var f19 = new LiveValidation('f19');
f19.add( Validate.Confirmation, { match: 'myPasswordField' } );

La validation d’email n’est pas un vrai type de validation dans le sens ou elle utilise la fonction ‘Validate.Format’ pour faire sa validation. C’est essentiellement une validation qui est faite assez souvent pour mériter ses propres fonctions afin que vous n’ayez pas à vous souvenir de la longue expression régulière et de la ‘failureMessage’ personnalisée à chaque fois que vous voulez valider un email..

Cela sert aussi comme exemple pour les plus aventuriers d’entre vous, qui veulent construire leur propres bibliothèques de validation personnalisées que vous utiliserez souvent. Celles-ci vont probablement inclure des choses comme des codes postaux, des numéros de téléphone, des dates, etc. qui varient trop largement pour les inclure ici, mais il a été remarqué que les adresses emails sont suffisamment génériques pour justifier une inclusion, donc allez-y.

Devrait être une adresse email :

var f20 = new LiveValidation('f20');
f20.add( Validate.Email );

La plupart du temps, vous voudrez combiner plusieurs types de validation sur un champ unique. Comme votre utilisateur se voit donner une réponse en temps réel, il serait bon de pouvoir spécifier l’ordre dans lequel les validations échouent, afin que le message le plus approprié soit affiché pour éviter toute confusion.

LiveValidation facilite cette tâche. Il vous suffit de continuer à ajouter des validations au même objet LiveValidation, et elles échoueront selon leur ordre d’ajout.

La combinaison la plus courante que vous utiliserez est Validate.Presence associé à une ou plusieurs autres validations, sachant que seulement Validate.Presence, Validate.Confirmation et Validate.Acceptance échoueront et afficheront leur message dans un champs vide. C’est dû au fait qu’il est courant d’avoir des champs optionnels, mais si l’utilisateur décide de fournir une information, elle doit être inférieure à une certaine longueur etc. Par conséquent si vous voulez vous assurer qu’un champs soit rempli, vous devez ajouter Validate.Presence, ensuite si vous nécessitez plus de types de validation, ajoutez les aussi.

Vous avez déjà vu un exemple de validation composée dans l’exemple de la page principale. L’exemple suivant vérifie que le champ ne soit pas vide, puis vérifie que ce soit une adresse email, et ensuite s’assure que sa longueur soit comprise entre 10 et 20 caractères.

Entrez une adresse email (10 à 20 caractères):

var f21 = new LiveValidation('f21');
f21.add( Validate.Presence );
f21.add( Validate.Email );
f21.add( Validate.Length, { minimum: 10, maximum: 20 } );

Quand un objet LiveValidation est instancié, s’il se trouve qu’il hérite d’un formulaire parent, il s’attachera automatiquement à l’évènement « soumettre » du formulaire, donc quand il est envoyé, la validation de tous les objets LiveValidation à l’intérieur du formulaire sera exécuté automatiquement. Si une des validations échoue il arrêtera la soumission du formulaire (Bien sûr ceci marche que quand javascript est activé dans le navigateur des utilisateurs, donc soyez sûr de faire quelques validations également sur le serveur !).

Vous pouvez également spécifier l’option onlyOnSubmit comme étant vraie lorsque vous créez l’objet LiveValidation, pour le rendre valide seulement quand le formulaire est soumis. Cela est démontré dans l’exemple suivant.

Remarquez aussi que le champ email n’a pas de validation présente ainsi si le champ n’est pas rempli le formulaire sera tout de même valide, puisqu’il sera traité comme un champ optionnel.

Dans cet exemple le résultat est surligné si valide, puisque cette page ne dispose pas de soumission ; au lieu de cela, le résultat déclenchera une alerte en cas de validité, en réalité il va simplement soumettre si valide.

var field1 = new LiveValidation( 'field1', {onlyOnSubmit: true } );
field1.add( Validate.Email );
var field2 = new LiveValidation( 'field2', {onlyOnSubmit: true } );
field2.add( Validate.Acceptance );
var field3 = new LiveValidation( 'field3', {onlyOnSubmit: true } );
field3.add( Validate.Presence );

Les objets LiveValidation utilisent quelques classes CSS pour vous permettre de mettre en forme les messages et les champs de formulaires basés sur le fait qu’ils soient valides ou non.

• LV_validation_message - la classe qui est ajoutée à tous les messages de validation
• LV_valid - la classe qui est ajoutée à un message valide
• LV_invalid - la classe qui est ajoutée à un message invalide
• LV_valid_field - la classe qui est ajoutée à un champ valide
• LV_invalid_filed - la classe qui est ajoutée à un champ invalide

Pour vous échauffer, voici les styles que ce site utilise pour ceux-ci :

.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}

.LV_valid {
    color:#00CC00;
}

.LV_invalid {
    color:#CC0000;
}

.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
    border: 1px solid #00CC00;
}

.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}