A reader asked me a question today on how to use the jQuery Validator to validate if 8 email address fields have a unique value. I have blogged about this before but that was for only 2 fields. Simply checking if one field is not equal to another. But here, we have a different situation. We need to check if all the 8 (or however many) fields are different from each other.

So, I thought I will blog about this and post the solution I came up with. Feel free to correct/improve. What I did was wrote another custom validation rule in additional-methods.js which looked something like this :-

jQuery.validator.addMethod("notEqualToGroup", function(value, element, options) {
// get all the elements passed here with the same class
    var elems = $(element).parents('form').find(options[0]);
// the value of the current element
var valueToCompare = value;
// count
var matchesFound = 0;
// loop each element and compare its value with the current value
// and increase the count every time we find one
jQuery.each(elems, function(){
thisVal = $(this).val();
if(thisVal == valueToCompare){
matchesFound++;
}
});
// count should be either 0 or 1 max
if(this.optional(element) || matchesFound <= 1) {
        elems.removeClass('error');
        return true;
    } else {
        elems.addClass('error');
    }
}, jQuery.format("Please enter a Unique Value."))

&#91;/js&#93;

So, thats the function that validates for uniqueness. The idea is that you give the same class to every form element that you want to be included in the comparison.
Something like this :-

&#91;html&#93;
<p>
 <label for="email1">Email 1</label>
 <input id="email1" name="email1" />
 </p>
 <p>
 <label for="email2">E-Mail 2 </label>
 <input id="email2" name="email2" />
 </p>
 <p>
 <label for="email3">E-Mail 3 </label>
 <input id="email3" name="email3" />
 </p>
 <p>
 <label for="email4">E-Mail 4 </label>
 <input id="email4" name="email4" />
 </p>
 <p>
 <label for="email5">E-Mail 5 </label>
 <input id="email5" name="email5" />
 </p>
 <p>
 <label for="email6">E-Mail 6 </label>
 <input id="email6" name="email6" />
 </p>
 <p>
 <label for="email7">E-Mail 7 </label>
 <input id="email7" name="email7" />
 </p>
 <p>
 <label for="email8">E-Mail 8 </label>
 <input id="email8" name="email8" />
 </p>

[/html]

And you can use this in your validation like this :-


$("#signupForm").validate({
 rules: {
 email1:{
 email: true,
 notEqualToGroup: ['.distinctemails']
 },
 email2:{
 email: true,
 notEqualToGroup: ['.distinctemails']
 },
 email3:{
 email: true,
 required: true,
 notEqualToGroup: ['.distinctemails']
 },
 email4:{
 notEqualToGroup: ['.distinctemails']
 },
 email5:{
 notEqualToGroup: ['.distinctemails']
 },
 email6:{
 notEqualToGroup: ['.distinctemails']
 },
 email7:{
 notEqualToGroup: ['.distinctemails']
 },
 email8:{
 notEqualToGroup: ['.distinctemails']
 }
 }
 });

I hope this gives you an idea of how to compare multiple fields.

Tagged with:  

19 Responses to jQuery Validator Plugin and notEqualTo Rule (with Multiple Fields)

  1. florian says:

    hi this looks quite well but unfortunately I do not knows how to appeal to the
    should. I have the example above, already tried and it did not exist.
    can you help me there? thank you

  2. Anuj Gakhar says:

    florian, I didnt get you. appeal to what?

  3. […] 幸好有熱心高手寫了 Validation 的 plugin,可以加掛這項驗證上去,以下來說明怎麼做吧。 原始網址在此 […]

  4. rick says:

    A couple questions:
    1) In the second code snippet, where do you assign the class to the fields you want to validate?
    2) And in the third code snippet, is the value “.distinctemails” supposed to correlate to the class name in the second snippet?

  5. Anuj Gakhar says:

    Rick,
    1) You dont need to have assign any class as that bit is done in the rules.
    notEqualToGroup: [‘.distinctemails’] – By adding this rule to every email element, the code knows that they are part of the group.

    2) No, its not, if you copy the code above, it should just work.

  6. Tim Gill says:

    I want to adapt this strategy for use with radio buttons instead of text fields. As it is, it doesn’t seem to work for them. I’m digging around and trying to figure it out, but if you have any suggestions, they would be welcome.

    Basically: 3 sets of radio buttons. (group1, group2 and group3). each with options of 1-5. I want to make sure that you can’t select the same number twice.

  7. Tim says:

    Awesome! Thanks a lot. This saved me a ton of time. Just one thing for other to watch out for that I encountered is if this method is used in combination with a remote method (to check email uniqueness against what’s already in the DB) make sure this rule is defined before the remote rule or it will never get run.

    Thanks again.

  8. Tommy says:

    is there a working demo of this anywhere?

    • Tommy says:

      i have tried adding this via the additional-methods.js, but cannot get it to work. If i can see a working version online, i can check i have it all wired up correctly, hopefully you can put a link to a working version please??

  9. Anuj Gakhar says:

    Hi Tommy, glad you got it working!

  10. whosayni says:

    Hi, I’m looking for a similar solution (not equal value validation) but in my case the inputs of the form are created dynamically and they can be limitless so I can´t use the rules method as you do because I can´t list the names of the inputs…

  11. Adam says:

    Thanks, man. Nice little snippet. Simple and easy to read also.

  12. Glen Pike says:

    You are missing a return value if the field does not validate – shouldn’t the method return false?

  13. […] for distinct validation for the bunch of form fields I was working on, when I came accross this site which illustrates the way of doing so. We could add our custom function/method which does the […]

  14. Dev says:

    notEqualToGroup: [‘.distinctemails’]
    in the above code what you are passing to the function as distinctemails??
    distinctemails means what??

Leave a Reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 445 other subscribers

© 2011 Anuj Gakhar
%d bloggers like this: