Utiliser addMethod dans le plugin jQuery Validate
Je souhaite valider une zone de texte à l'aide de la méthode de validation personnalisée du plugin jQuery Validate (addMethod) mais mon code ne fonctionne pas. Quelqu'un peut-il m'aider à trouver l'erreur? Je n'ai jamais utilisé de méthode de validation personnalisée auparavant, il est donc difficile pour moi de trouver où je me suis trompé dans ce code.
Voici mon code:
$(document).ready(function () {
jQuery.validator.setDefaults({
// where to display the error relative to the element
errorPlacement: function(error, element) {
error.appendTo(element.parent().find('div.myErrors'));
}
});
jQuery.validator.addMethod(
"selectnic"
function(value,element){
if(element.value == /^[0-9]{9}[vVxX]$/)
return false;
else return true;
},
"wrong nic number"
);
$('#basicDetails').validate({ // initialize the Plugin
rules: {
fname: {
required: true,
lettersonly: true,
},
lname: {
required: true,
lettersonly: true,
},
},
messages: {
fname: {
required:"Please enter your first name",
lettersonly: "Login format not valid",
},
lname: {
required:"Please enter your last name",
lettersonly: "Login format not valid",
},
},
submitHandler: function (form) {
alert('valid form submitted');
return false;
}
});
});
..Code HTML ....
<form action="#" method="post" id="basicDetails" runat="server">
<table width="68%" border="0" cellpadding="6" cellspacing="6">
<tr>
<td> </td>
<td> First name </td>
<td>:</td>
<td><input type="text" name="fname" id="fname" class="textbox" placeholder="Required field"/><div class="myErrors"></div></td>
<td align="right"> Last name :</td>
<td><input type="text" name="lname" class="textbox" id="lname" placeholder="Required field"/><div class="myErrors"></div></td>
</tr>
<tr>
<td> </td>
<td width="147" > NIC no </td>
<td> : </td>
<td width="172"><input type="text" name="nic" id="nic" class="textbox" placeholder="Required field"/><div class="myErrors"></div></td>
<td width="167" align="right">Passport no :</td>
<td width="167" id="showPP"> <input type="text" name="passport" class="textbox" id="ppnu" placeholder="Required field"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="3"><input type="submit" name="submit" value="Submit "class="submit" id="submit" />
<input type="submit" name="reset" value="Reset "class="reset" />
</td>
</tr>
</table>
</form>
..... après avoir édité mon code ....
$(document).ready(function () {
jQuery.validator.setDefaults({
// where to display the error relative to the element
errorPlacement: function(error, element) {
error.appendTo(element.parent().find('div.myErrors'));
}
});
jQuery.validator.addMethod("selectnic", function(value, element){
if (/^[0-9]{9}[vVxX]$/.test(value)) {
return false;
} else {
return true;
};
}, "wrong nic number");
$('#basicDetails').validate({ // initialize the Plugin
rules: {
fname: {
required: true,
lettersonly: true,
},
lname: {
required: true,
lettersonly: true,
},
nicnumber: {
// other rules,
selectnic: true // <- declare the rule someplace!
}
},
messages: {
fname: {
required:"Please enter your first name",
lettersonly: "Login format not valid",
},
lname: {
required:"Please enter your last name",
lettersonly: "Login format not valid",
},
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
Les modifications progressives ci-dessous présentent trois problèmes différents.
1) Vous avez manqué une virgule entre selectnic et function(.
Essayez également ce format lorsque vous utilisez regex...
jQuery.validator.addMethod("selectnic", function(value, element){
if (/^[0-9]{9}[vVxX]$/.test(value)) {
return false; // FAIL validation when REGEX matches
} else {
return true; // PASS validation otherwise
};
}, "wrong nic number");
[~ # ~] modifier [~ # ~] : cette réponse suppose que votre regex et votre logique d'origine sont corrects. Votre logique renvoie false lorsque regex est une correspondance. false signifie que la validation a échoué et vous verrez le message d'erreur.
2) MODIFIER 2:
Après avoir créé de nouvelles méthodes, vous devez également utiliser les. Je ne vois pas la règle/méthode selectnic utilisée n'importe où dans votre code.
Exemple :
rules: {
myFieldName: {
// other rules,
selectnic: true // <- declare the rule someplace!
}
}
3) MODIFIER 3:
Et enfin, l'original de l'OP true/false la logique était à l'envers. Il voulait PASSER la validation lors d'une correspondance d'expressions régulières… par conséquent, doit return true.
if (/^[0-9]{9}[vVxX]$/.test(value)) {
return true; // PASS validation when REGEX matches
} else {
return false; // FAIL validation
};