Issue while validating the form using JQuery

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

1. $.data(...) is undefined
2. Not validating Field1.
3. 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()