Question

I tried to do everything by what I read..but jquery validation doesnt happen when I submit the form. Here is my jquery:

(function ($) {

$('#registrationForm').validate({
    rules: {
        username: {
            required: true,
            minlength: 4
        },
        fullname: {
            required: true,
            minlength: 4
        },
        email: {
            required: true,
            minlength: 4,
            email: true
        },
        retype_email: {
            required: true,
            minlength: 4,
            email: true,
            nameField: { notEqual: "email" }
        },
        password: {
            required: true,
            minlength: 4
        },
        retype_password: {
            required: true,
            minlength: 4,
            nameField: { notEqual: "password" }
        },
        url: "url",
        comment: "required"
    },

    messages: {
        username: {
            required: "Please fill your name",
            minlength: "The name is too short"
        },
        fullname: {
            required: "Please fill your surname",
            minlength: "Your surname is too short"
        },
        email: {
            required: "Please fill your email",
            minlength: "Your email is too short",
            email: "Invalid email"
        },
        retype_email: {
            required: "Please retype your email",
            minlength: "Your email is too short",
            email: "This is an invalid email",
            nameField: "Your email doesnt match the email above"
        },
        password: {
            required: "Please fill in your password",
            minlength: "The password is too short"
        },
        retype_password: {
            required: "Please retype your password",
            minlength: "The password is too short",
            nameField: "Your password doesnt match the password above"
        }
    },
    submitHandler: function (form) {
        $(form).ajaxSubmit();
    },
    invalidHandler: function (e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var messages = errors == 1
           ? 'You have missed 1 field. It has been highlighted below'
           : 'You missed ' + errors + 'fields. They have been highlighted below';
            $("div.errors span").html(message);
            $("div.error").show();
        }
        else {
            $("div.error").hide();
        }
    }
});

jQuery.validator.addMethod("notEqual", function (value, element, param) {
    return this.optional(element) || value != param;
}, "Please specify a different (non-default) value");

})(jQuery);

Here is my html:

    <form action="" method="post" id="registrationForm" >    <table>

    <tr>

        <td>

            Sign up

        </td>

    </tr>

    <tr>

        <td>

            <input class="required" id="username" name="username" title="User name" type="text" value="" />

        </td>

    </tr>

    <tr>

        <td>

            <input class="required" id="fullname" name="fullname" title="Full name" type="text" value="" />

        </td>

    </tr>

    <tr>

        <td>

            <input class="required" id="email" name="email" title="Email address" type="text" value="" />

        </td>

    </tr>

    <tr>

        <td>

           <input class="required" id="retype_email" name="retype_email" title="Retype email" type="text" value="" />

        </td>

    </tr>

    <tr>

        <td>

           <input class="required" id="password" name="password" title="Password" type="text" value="" />

        </td>

    </tr>

     <tr>

        <td>

               <input class="required" id="retype_password" name="retype_password" title="Retype password" type="text" value="" />

            </td>

        </tr>
</table>
<input type="submit" name="register" value="Sign up" />
</form>

What am I doing wrong, why the form is submited and there are no errors shown whenever all the fields are empty?

UPDATE:

Uncaught TypeError: Object [object Object] has no method ‘validate’

Answer 1

I hope this is what you want.

DEMO

1. typo: In invalidHandler declared variable was message but messages was used in $("div.errors span").html(messages);
2. changed namefield in retpye_password and retype_email to equalTo