jquery validation using class attribute
Question
I have multiple text fields in my form which should contain only 5 alphabets and required fields. I am using jQuery Validation for this using class attribute.
Sample code:
<html>
<head>
<title>Title</title>
</head>
<cfsavecontent variable="headerJS">
<script type="text/javascript" src="js/validateCurrency.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(function() {
alert("function");
jQuery.validator.addMethod("APUnit", function(value, element) {
return this.optional(element) || /^[A_Za-z]{5}$/i.test(value);
}, " ");
jQuery.validator.addMethod("cRequired", jQuery.validator.methods.required, "Customer name required");
jQuery.validator.addClassRules("APunit1",{APUnit: true, cRequired: true});
});
</script>
<style>
label.error {
color: red;
font-style: italic;
background: transparent url(images/unchecked.gif) no-repeat scroll 0 0;
padding-left:20px;
margin-left:10px;
}
input.error { border: 1px dotted red; }
.border td {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.border th{
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
</cfsavecontent>
<cfhtmlhead text="#headerJS#">
<body>
<cfform name="eForm" method="POST">
Name: <input type="text" name="name" class="APUnit1">
<input type="submit" value="Submit">
</cfform>
</body>
</html>
But I am not getting any error message when I gave invalid input. Validation is working. I couldn't find the bug in it. Please help me to get through this.
1 answers
solution1
3 ACCPTED 2015-01-28 19:38:52
No matter how you create and/or declare your rules, you still must attach the .validate() method to your form in order to initialize the plugin.
$(function() {
$('form[name="eForm"]').validate();
jQuery.validator.addMethod("APUnit", function(value, element) { ....
....
You also misspelled APunit1 here...
<input type="text" name="name" class="APUnit1">
It's spelled as APunit1 here...
jQuery.validator.addClassRules("APunit1" ....
Initialize the plugin and fix the spelling error:
Working DEMO: http://jsfiddle.net/pcgb4moj/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.