jQuery Validation: Compare Fields and Change Messages for Each Validator

I’m new to jQuery validation as I’ve used ASP.NET web form validators for years and they’ve worked well. I’m using the jQuery validation plugin in a new project to perform validation and it works great.

Of course, any time you start with a new technology you have to map concepts to implementation. I was doing this when trying to figure out how to compare two fields on a form to ensure they’re equal. The jQuery validation library’s equalTo() method does just the trick to compare two fields. I show below a couple of ways to invoke equalTo().

First, you can use the validate() method to invoke it as we do here by requiring the confirmnewpassword field to match the newpassword field using the equalTo() method.

$(document).ready(function () { //validate $(“form”).validate({ rules : { confirmnewpassword: { equalTo: “#newpassword” } } }); }); Second, you can actually attach the comparison directly to the HTML element. Check out the following HTML with the equalTo attribute inserted directly into the input element. This causes a comparison validation without mucking in the validate() method.
<input id=”confirmnewpassword” name=”confirmnewpassword” type=”password” equalTo=”#newpassword” />
What about changing the validation message? By default, the message says “Please enter the same value again” but I wanted to change this. You can change the default message for every validation option by overriding the jQuery validation plugin’s default message values. This works great if you want to make every message generic but what about changing each message to be customized for each field?

To customize the message for an individual field and validator, it’s as simple as adding a few lines of code to the validate() method. Check out this great post for more guidance on custom error messages and see the short example below for an implementation to display a custom message for a typical password change form.

Start w/ the HTML for the form and four form fields.

<label for="accountname">
    User name</label>
<input id="accountname" name="accountname" class="text required" maxlength="120" />
<label for="oldpassword">
    Old password</label>
<input id="oldpassword" name="oldpassword" class="text required" type="password" maxlength="60" />
<label for="newpassword">
    New password</label>
<input id="newpassword" name="newpassword" class="text required" type="password" maxlength="60" />
<label for="confirmnewpassword">
    Confirm new password</label>
<input id="confirmnewpassword" name="confirmnewpassword" class="text required" type="password" equalTo="#newpassword" maxlength="60" />

Add some code to the validate() method to change the messages for particular fields and validation controls.

$(document).ready(function () {
    //validate
    $("form").validate({
        messages: {
            accountname: {
                required: "Enter a username"
            },
            oldpassword: {
                required: "Enter your current password"
            },
            newpassword: {
                required: "Enter a new password"
            },
            confirmnewpassword: {
                required: "Enter the new password again",
                equalTo: "Make sure to retype the new password correctly"
            }
        }
    });
});

And there you have it. Custom validation messages for required and compared fields. You can customize as many or as few values as you’d like this way and it’s a nice compact method to provide poignant feedback to your application’s users.

Comments are closed.

Sign in
classic
Forgot password?
×
Sign up

(*) Required fields

I agree with OptimaSales Terms & Privacy Policy

×