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?

Solution 1

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']
        },
    },
});

Solution 2

You can use $.unique():

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

Comments

[dzordz]

I'm not quite clear how to do it, at last, I'm jquery nooby. could you show me in my jsfiddle? jsfiddle.net/zPetY please?

[mishik]

kei's solution is much better, actually. I did not knew that "validator" had such feature

[dzordz]

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

[Kunal Rajput]

what if i have array of email like email[] not email_1 , email_2 ..