jQuery validation of multiple not equal inputs

问题:

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?

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

回答2:

You can use $.unique():

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

回答3:

uniqArray = emailsArray.slice();

$.unique(uniqArray);

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