2013-06-06 3 views
5

Мне удалось настроить плагин jQuery validate для моей формы, и я дал правила для двух полей, в которых их значения не должны совпадать. В частности, входы электронной почты и email_2 не могут быть одинаковыми сейчас, и это работает. Но моя настоящая потребность в том, чтобы проверять несколько входов таким же образом (в этом случае 4 из них). У меня есть электронная почта, email_2, email_3, email_4, и ни один из них не должен быть равным. Вы можете увидеть это в моем jsfiddle here, и если у вас есть решение, вы можете обновить его и положить его обратно в ответ:Проверка jQuery нескольких не равных входов

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

что является лучшее решение для проверки всех входных данных?

+1

Проверьте это: http://www.anujgakhar.com/2010/05/24/jquery-validator-plugin-and-notequalto-rule-with-multiple-fields/ – kei

+0

Спасибо, но я попытался сделать это, и я получаю ошибку в библиотеке jQuery, кажется, что это не работает на последних 1.10.1 ... – dzordz

ответ

9

Да, он по-прежнему работает с 1.10.1

DEMO

источник: 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'] 
     }, 
    }, 
}); 
+0

спасибо, работает как шарм! Наверное, я пропустил ошибку где-то в другом месте. Я, однако, что это не поддерживается, когда консоль дала мне библиотечную ошибку – dzordz

1

Вы можете использовать $ .unique():

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

Я не совсем понимаю, как это сделать, наконец , Я jquery nooby. не могли бы вы показать мне мой jsfiddle? http://jsfiddle.net/zPetY/, пожалуйста? – dzordz

+0

Здесь вы идете: http://jsfiddle.net/zPetY/1/ – mishik

+1

Решение kei намного лучше, на самом деле. Я не знал, что «валидатор» имел такую ​​функцию – mishik

0
uniqArray = emailsArray.slice(); 

$.unique(uniqArray); 

if (uniqArray.length != emailsArray.length) { 
    <your magic here> 
} 
Смежные вопросы