Issue while validating the form using JQuery - validation

Question

Scripts
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#Field2").rules("add", { regex: "^[a-zA-Z0-9]{0,3}$" });
$.validator.addMethod(
'regex',
function (value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
}, "My Error Message");
$('#MyForm').validate(
{
rules: {
Field1: {
required: false,
range: [1, 9999999999]
}
},
messages: {
Field1: {
range: jQuery.validator.format("Please enter a value between {0} and {1}.")
}
}
,
highlight: function (element) {
$(element).closest('.MyForm').removeClass('success').addClass('error');
},
success: function (element) {
}
});
});
</script>
Form
<form action="#" id="MyForm" name="MyForm">
<table id="tblData">
<tr>
<td>
<label>
Field1</label>
<input id="Field1" name="Field1" type="text" value="" />
</td>
</tr>
<tr>
<td>
<label>
Field2</label>
<input id="Field2" name="Field2" />
</td>
</tr>
<tr>
<td>
<span id="submitButton" class="k-button">Next</span>
<input type="submit" class="button" name="submitButtonTest" id="submitButtonTest"
value="Validation Test">
</td>
</tr>
</table>
</form>
Issue
$.data(...) is undefined
Not validating Field1.
Not showing error messages
JSFiddle
Demo is here

Answer 1

You can't define a rule for a field before you enable validation for the form that contains it. So you need to put
$("#Field2").rules("add", { regex: "^[a-zA-Z0-9]{0,3}$" });
after
$("#myForm").validate(...);
FIDDLE
If you want to specify a message when adding the rule, you can do:
$("#Field2").rules("add", {
regex: "^[a-zA-Z0-9]{0,3}$",
messages: {
regex: "Must be 0 to 3 alphanumeric characters"
}
});
See the documentation of .rules()