jQuery validation of multiple not equal inputs

Question

I've managed to set up jQuery validate plugin on my form and I gave rules for two fields in which their values should not match. Specifically, the email and email_2 inputs can not be the same now, and that works. But my real need is to validate multiple inputs in the same way (in this case 4 of them). I have email, email_2, email_3, email_4 and none of them should not be equal. You can see it in my jsfiddle here, and if you have solution, you can update it and put it back in answer:

html:

<form id="signupform" method="post">
<input id="email" name="username" />
<br/ >
<input id="email_2" name="email_2" />
<br />
<input id="email_3" name="email_3" />
<br />
<input id="email_4" name="email_4" />
<br />
<input id="submit" type="submit" value="submit" />   
</form>

jquery:

$.validator.addMethod("notequal", function(value, element) {
 return $('#email').val() != $('#email_2').val()}, 
 "* You've entered this one already");

// validate form    
$("#signupform").validate({

rules: {
    email: {
        required: true,
        notequal: true
    },
    email_2: {
        required: true,
        notequal: true
    },
},
});

what is the best solution for validate of all inputs?

Check this out: http://www.anujgakhar.com/2010/05/24/jquery-validator-plugin-and-notequalto-rule-with-multiple-fields/ — kei, Jun 06 '13 at 14:29
Thank you, but, I tried to do like this and I get error on jQuery library, it seems that this doesn't work on latest 1.10.1... — dzordz, Jun 06 '13 at 14:51

score 11 · Accepted Answer · edited Jan 12 '17 at 08:16

Yes, it still works with 1.10.1

DEMO

source: http://www.anujgakhar.com/2010/05/24/jquery-validator-plugin-and-notequalto-rule-with-multiple-fields/

HTML

<form id="signupform" method="post">
    <p>
        <input class="distinctemails" id="email" name="username" /></p>
    <p>
        <input class="distinctemails" id="email_2" name="email_2" /></p>
    <p>
        <input class="distinctemails" id="email_3" name="email_3" /></p>
    <p>
        <input class="distinctemails" id="email_4" name="email_4" /></p>
    <p>
        <input id="submit" type="submit" value="submit" />
    </p>
</form>

jQuery

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."))

// validate form    
$("#signupform").validate({

    rules: {
        email: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
        email_2: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
        email_3: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
        email_4: {
            required: true,
            notEqualToGroup: ['.distinctemails']
        },
    },
});

thank you, works like charm! I guess I've missed an error somewhere else. I though that it's not supported when console gave me library error — dzordz, Jun 06 '13 at 15:33
what if i have array of email like email[] not email_1 , email_2 .. — Kunal Rajput, Apr 22 '21 at 15:04

score 1 · Answer 2 · answered Jun 06 '13 at 14:30

1

You can use $.unique():

uniqArray = $.unique(emailsArray);
if (uniqArray.length != emailsArray.length) {
    <your magic here>
}

answered Jun 06 '13 at 14:30

mishik

9,973
9
45
67

I'm not quite clear how to do it, at last, I'm jquery nooby. could you show me in my jsfiddle? http://jsfiddle.net/zPetY/ please? – dzordz Jun 06 '13 at 14:49
1

kei's solution is much better, actually. I did not knew that "validator" had such feature – mishik Jun 06 '13 at 15:24

score 0 · Answer 3 · edited Nov 03 '15 at 09:56

0

uniqArray = emailsArray.slice();

$.unique(uniqArray);

if (uniqArray.length != emailsArray.length) {
    <your magic here>
}

edited Nov 03 '15 at 09:56

Jazi

6,569
13
60
92

answered Nov 03 '15 at 09:18

Aaron.Zhao

101
2
4

jQuery validation of multiple not equal inputs

3 Answers3

Linked