jquery - jQuery 验证无法正常工作

Question

我试图通过我阅读的内容来做所有事情..但是当我提交表单时不会发生 jquery 验证。这是我的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);

这是我的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>

我做错了什么，为什么提交表单并且当所有字段为空时都没有显示错误？

更新：

未捕获的类型错误：对象 [对象对象] 没有方法“验证”

Answer 1

我希望这是你想要的。

演示

1. 错字：在invalidHandler声明的变量中是消息，但消息被用于$("div.errors span").html(messages);
2. 更改namefield为retpye_password_ retype_email_equalTo