私は読んだことですべてをやろうとしました..しかし、フォームを送信しても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>
フォームが送信され、すべてのフィールドが空のときにエラーが表示されないのはなぜですか?
アップデート:
キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] にはメソッド 'validate' がありません