J'utilise le plugin de validation jQuery pour valider un formulaire d'inscription.
Chaque champ de saisie de texte a des instructions pré-remplies en tant que valeurs dans la zone de saisie
ex: pour une zone de saisie de texte id = 'Nom', la valeur par défaut sera 'Entrer votre nom'. J'ai collé ci-dessous un exemple de code:
<input type="text" id="Name" value="Enter Your Name" onfocus="if(this.value == 'Your Name'){this.value = '';}" type="text" class="required" onblur="if(this.value == ''){this.value='Your Name';}" size="25" />
Ce que j'ai besoin de savoir, c'est comment spécifier dans la règle de validation de sorte que le plug-in génère une erreur de champ obligatoire si la zone de saisie contient le message par défaut ou des valeurs vides.
Aide très appréciée.
J'ai résolu le problème en créant une validation personnalisée à l'aide de validator.addMethod, ce qui est très simple.
J'ai collé un extrait de mon bloc de validation ci-dessous:
//1. Define custom validation
$(document).ready(function()
{
jQuery.validator.addMethod("defaultInvalid", function(value, element)
{
switch (element.value)
{
case "Your Name": -- this will be the default value in the Name text box
if (element.name == "Your Name")
return false;
}
}
//2. Include custom validation in the rules for your element
$("#aspnetForm").validate(
{
rules:
{
Name: "required defaultInvalid"
},
messages:
{
Name: "Please input your name"
}
})
}
J'ai utilisé la même chose pour tous les éléments qui ont des valeurs par défaut dans le formulaire. Cela fonctionne très bien.
Je pense que c'est mieux:
jQuery.validator.addMethod("defaultInvalid", function(value, element)
{
return !(element.value == element.defaultValue);
});
Si vous souhaitez ajouter un message d'erreur personnalisé, signalez-le simplement.
jQuery.validator.addMethod("defaultInvalid", function(value, element) {
return !(element.value == element.defaultValue);
}, 'Custom Error Message for this field');
pour moi, ce qui précède n'a fonctionné qu'avec les modifications suivantes:
jQuery.validator.addMethod("defaultInvalid", function(value, element)
{
switch (element.value)
{
case "Your Name":
if (element.name == "element_name") return false;
break;
default: return true;
break;
}
});
il suffit d'ajouter ceci après la section de règle
onfocusout: function(element) { $(element).valid(); }
et tout ira bien.
$.validator.addMethod("defaultInvalid", function(value, element, param){
var r = $(element).rules();
var req=(this.objectLength(r))?r.required:false; // OR may be var req=r.required; // true, false or undefined.
return !req || (value!=param);
},$.validator.messages.required);
...
,rules:{
message: {
defaultInvalid:$('#message').attr('placeholder')
}
}
Cette fonction prend en compte les cas de champs "obligatoires" et "facultatifs".
L'expression "! Req" remplace volontairement "this.optional (élément)" car je reçois un message d'erreur "incompatibilité de dépendance" dans certains cas.
J'ai créé un correctif pour jquery.validationEngine afin de permettre d'ignorer un champ d'entrée pour une forme complexe. J'ai apporté les modifications suivantes:
Dans votre cas, vous pouvez utiliser la modification de la classe skipValidate pour effectuer cette opération. Vous pouvez trouver le script patché ici avec le filtre anglais (un est également disponible):
jquery.validationEngine.js corrigée
jquery.validationEngine-en.js corrigée
Je devrais soumettre ces changements dans git hub, mais je n’ai pas le temps de le faire pour le moment.
Jérôme Godbout
Panthera Dental
Je pense que vous devez ajouter le cas "par défaut" pour que cela fonctionne correctement:
jQuery.validator.addMethod ("defaultInvalid", fonction (valeur, élément) { switch (element.value) { cas "$ defaultText": if (element.name == "$ defaultText") renvoie false; break; par défaut: return true; break; } });