Плагин проверки jQuery: проверка флажков с разными именами - PullRequest
Новая
       24

Плагин проверки jQuery: проверка флажков с разными именами

2 голосов
/ 15 марта 2010

У меня есть набор из 4 флажков, все с разными именами, и требуется, чтобы хотя бы один флажок был установлен.

Я установил для каждого из них класс 'require-one'. 

<html>
<head>
<script src="scripts/lib/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">
 $(document).ready(function(){
    $("#itemForm").validate({

rules: { 
    check1: {  
        required : {  
            depends: function(element) {  
                $('.require-one:checked').size() == 0; 
            }  
        } 
    } 
}
    });
  });
</script>

</head>
<body>
<form name="itemForm" id="itemForm" method="post">
<input type="checkbox" name="check1" id="check1" class="require-one" value="1" />
<input type="checkbox" name="check2" id="check2" class="require-one" value="2" />
<input type="text" class="required" />
<input type="submit" />
</form>
</body>
</html>

Если вы введете 'return' до $('.require-one:checked').size() == 0; Однако, теперь моя проблема в том, что сообщение об ошибке исчезнет, ​​только если установлен флажок # 1. Если флажок № 2 установлен, он не исчезнет, ​​а будет отправлен. Как удалить ошибку, если установлены какие-либо флажки? 

rules: { 
    'nameOfAnyCheckbox': {  
        required : {  
            depends: function(element) {  
              return $('.require-one:checked').size() == 0; 
            }  
        } 
    }

Ответы [ 3 ]

5 голосов
/ 02 июня 2011

Джастин имеет правильный ответ. Вот расширение, которое объединяет отчеты об ошибках для всех флажков в одно сообщение:

http://jsfiddle.net/twd8j0tu/

$.validator.addMethod('require-one', function (value) {
              return $('.require-one:checked').size() > 0; }, 'Please check at least one box.');

var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e,i) { return $(e).attr("name")}).join(" ");

$("#itemForm").validate({
    groups: { checks: checkbox_names },
    errorPlacement: function(error, element) {
             if (element.attr("type") == "checkbox")
               error.insertAfter(checkboxes.last());
             else
               error.insertAfter(element);
    }         
});

(Обратите внимание, что этот код не работает после jquery.validate.js версии 1.10.0. Вам придется изменить его для более поздних версий).

2 голосов
/ 15 марта 2010

Мухи с ракетной установкой? 

$('.require-one:checked').size() == 0;

Примените правило к любому из флажков, используя его имя. Чтобы форма была действительной, этот флажок должен пройти валидацию. Чтобы этот флажок был действительным, необходимо установить хотя бы один из четырех флажков. 

$("#itemForm").validate({
rules: { 
    'check1': {  
        required: {
            depends: function(element) {
                return $('.require-one:checked').size() == 0;
            }
        } 
    } 
}
});

1007 *

Обновлено 2:

http://jsfiddle.net/MkPtP/1/

0 голосов
/ 16 февраля 2011

Я думаю, @Anurag был на правильном пути. Проверьте эту рабочую версию ...

http://jsfiddle.net/Y23ec/

Та же идея, просто другой способ сделать это. 

<form name="itemForm" id="itemForm" method="post">
<input type="checkbox" name="check1" id="check1" class="require-one validate-checkbox-oneormore" value="1" />
<input type="checkbox" name="check2" id="check2" class="require-one validate-checkbox-oneormore" value="2" />
<input type="text" class="required" />
<input type="submit" />
</form>

jQuery(document).ready(function () {
    $.validator.addMethod('validate-checkbox-oneormore', function (value) {
        return $('.require-one:checked').size() != 0; }, 'need a value');

    jQuery('#itemForm').validate({});
});
...