Question

I am using jQuery validation to attempt to keep a user from posting back unless he meets a couple of qualifications. But the required option doesn’t seem to be keeping the form from submitting…

Here is jsFiddle with an example: jsFiddle

I double checked my jQuery code and it would seem as though it was working. jsFiddle says it valid code. So I am not sure what the hangup is?

Thanks

Answer 1

jQuery.validate uses names for the rules, not ids. So replace the ids with names in your input fields.

Also your form should be <form id="temp1"> and not <form id="#temp">.

Here’s a link to your fixed code:

<form id="temp1">
    <input type="text" name="HospitalFinNumber"/> Hospital Fin<br/>
    <input type="text" name="DateOfBirth"/>Date of Birth<br/>
    <input type="text" name="AdmitDate"/>Admit Date<br/>
    <input type="text" name="Comment"/>Comment<br/>
    <input type="submit" value="Save" class="button" id="btClick"/>
</form>

and the script:

$(document).ready(function () {
    $("#temp1").validate({
        rules: {
            HospitalFinNumber: {
                required: true,
                minlength: 6
            },
            DateOfBirth: {
                required: true
            },
            AdmitDate: {
                required: true
            },
            Comment: {
                required: function (element) {
                    return $(element).val().length < 4000;
                },
                maxlength: 4000
            }
        },
        messages: {
            HospitalFinNumber: 'Please Enter a Hospital Fin number',
            DateOfBirth: 'Please enter a valid Date Of Birth',
            AdmitDate: 'Please select an Admit Date',
            Comment: 'Why dont you stop attempting to put in more than 4000 characters?  Thanks...'
        }
    });
});