问题
I need this validation to fire when the div button is clicked. If the validation is successful, I want it to alert "is good".
Unfortunately, although validation fires and all rules are checked, it does not error if a required field is blank. It will error for any of the other checks tho.
Finally, if I fill in the fields correctly and click the button, nothing happens.
JS:
$(document).ready(function() {
// Submit prompted password reset
$("#passwordResetButton").click(function() {
$("#passwordResetForm").validate({
rules: {
password: { required: true, minlength: 8, maxlength: 40, remote: { url: "/ajax/isPasswordOK", data: { product: function() { return $("#password").val(); } } } },
confirmPassword: { required: true, equalTo: "#password" },
},
messages: {
password: { required: "Please enter a password", minlength: "Password must be at least 8 characters long", remote: "Password should contain: <li>At least one upper case character <li>At least one lower case character <li>At least one number <li>And may not contain any of the following: \\;-\")(&*='|$" },
confirmPassword: { required: "Please confirm your password", equalTo: "The passwords do not match" },
},
onkeyup: false, //turn off auto validate whilst typing
onblur: true,
afterValidation: function() {
alert('is good');
}
});
});
});
HTML:
<form id="passwordResetForm" style="width: 480px; margin: auto;">
<div class="row"><p class="lead">Let's reset that password</p></div>
<div class="row">
<div class="small-8 large-4 columns"><label>New Password:</label></div>
<div class="small-12 large-6 columns"><input name="password" id="password" type="password" size="20"/></div>
</div>
<div class="row">
<div class="small-8 large-4 columns"><label>Confirm Password:</label></div>
<div class="small-12 large-6 columns"><input name="confirmPassword" id="confirmPassword" type="password" size="20"/></div>
</div>
<div class="row">
<div class="large-offset-10 small-3 large-1 columns">
<div id="passwordResetButton" class="small button">Submit</div>
</div>
</div>
</form>
回答1:
There are a few problems with your code.
1) .validate() is the initialization method of the plugin, not a method for testing the form. In other words, do not put it inside of a click handler or it won't be ready when you need it. Put .validate() inside of the DOM ready event handler so it's fired once when the page is created, then the form is immediately ready for validation.
2) There is no such option as onblur for this plugin. It is called onfocusout and the option is already activated by default. Setting this type of option to true is not valid and will likely break something, so simply leave it out of the initialization entirely.
3) There is no such option/function called afterValidation:. You cannot just "invent" callback functions... jQuery plugins have to have these things already specifically built into them. If you want to fire something on a valid form, use the supplied submitHandler: callback function.
submitHandler: function (form) {
alert('is good');
return false;
}
4) Use a <input type="submit" /> or a <button type="submit">Submit</button> for the form's submit. This way, the plugin can automatically capture the click event and handle the submit as designed.
5) Minor note: For your custom messages, simply use {0} and the rule's parameter will be inserted automatically. This kind of code is easier to maintain.
minlength: "Password must be at least {0} characters long",
Working Demo: http://jsfiddle.net/J9N3g/
I suggest that you review the full documentation here: http://docs.jquery.com/Plugins/Validation
jQuery:
$(document).ready(function () {
$("#passwordResetForm").validate({
rules: {
password: {
required: true,
minlength: 8,
maxlength: 40,
remote: {
url: "/ajax/isPasswordOK",
data: {
product: function () {
return $("#password").val();
}
}
}
},
confirmPassword: {
required: true,
equalTo: "#password"
},
},
messages: {
password: {
required: "Please enter a password",
minlength: "Password must be at least {0} characters long",
remote: "Password should contain: <li>At least one upper case character <li>At least one lower case character <li>At least one number <li>And may not contain any of the following: \\;-\")(&*='|$"
},
confirmPassword: {
required: "Please confirm your password",
equalTo: "The passwords do not match"
},
},
onkeyup: false, //turn off auto validate whilst typing
submitHandler: function (form) {
alert('is good');
return false;
}
});
});
HTML:
<form id="passwordResetForm" style="width: 480px; margin: auto;">
<div class="row">
<p class="lead">Let's reset that password</p>
</div>
<div class="row">
<div class="small-8 large-4 columns">
<label>New Password:</label>
</div>
<div class="small-12 large-6 columns">
<input name="password" id="password" type="password" size="20" />
</div>
</div>
<div class="row">
<div class="small-8 large-4 columns">
<label>Confirm Password:</label>
</div>
<div class="small-12 large-6 columns">
<input name="confirmPassword" id="confirmPassword" type="password" size="20" />
</div>
</div>
<div class="row">
<div class="large-offset-10 small-3 large-1 columns">
<input type="submit" id="passwordResetButton" class="small button" />
</div>
</div>
</form>
回答2:
Change to
afterValidation: function() {
alert('is good');
}
to
submitHandler: function() { alert("is good!") }:
See jquery validate option: http://docs.jquery.com/Plugins/Validation/validate
Change div to button, it a best practice
<div id="passwordResetButton" class="small button">Submit</div>
to
<button id="passwordResetButton" class="small button">Submit</button>
来源：https://stackoverflow.com/questions/15995017/jquery-validate-not-working-properly