JQuery validation plugin: $("#").validate() is not a function
I am using jquery-1.4.2 library and jquery.validate.js plugin to validate a very simple form. In the head section, I have following code:
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css"></link>
<script type="text/javascript" src="scripts/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// date pickers
$('#birthdate').datepicker();
$("#deliverydate").datepicker();
//apply styles to buttons
$('input:button').button();
// data validation
$("#createAnimalForm").v开发者_开发知识库alidate({
debug: true,
rules: {
weight: {
required: true
}
},
messages: {
weight: {
required: "Please enter a numeric value for weight."
}
}
});
});
function createClicked(){
$("#createAnimalForm").validate().form();
}
</script>
In the body section, I have defined the form and the input field to accept the weight value. The code from body is as follows:
<form id="createAnimalForm">
<table cellpadding="5px">
<tr>
<td>Weight:</td>
<td><input type="text" name="weight" id="weight"></input> gms</td>
</tr>
<tr>
<td></td>
<td align="left"><input type="button" onclick="createClicked();" id="createButton" name="createButton" value="Create Animal"></td>
</tr>
</table>
</form>
When I load the page in firefox, I get the following error in firebug:
$("#createAnimalForm").validate is not a function
I searched on the net for a bit, but could not find any solution for this. I think I have the jquery library located at the correct location, and it appears that jquery-validation plugin is compatible with jquery-1.4.2.
Any ideas on what I am doing wrong?
Thanks, Nikhil.
You don't quite have it right when you are setting up validate. Try:
// data validation
$("#createAnimalForm").validate({
debug: true,
rules: {
weight: {
required: true
}
},
messages: {
weight: {
required: "your message here"
}
}
});
Then use:
if ($('#createAnimalForm').validate().form()) { ... }
Wherever you want to trigger validation.
Had the same issue; validated HTML & found I was missing a name="email"
attribute from an <input />
. Always validate the HTML to be positive your HTML is valid. After I added it, validate()
worked perfectly.
精彩评论