jQuery: проверить, если установлен один из множества флажков (разные имена, с помощью плагина проверки jQuery)

Question

У меня есть форма, которая имеет много флажков (слишком много, чтобы иметь смысл использовать их собственные правила), и мне нужно использовать плагин jQuery Validation *1002*, чтобы убедиться, что хотя бы один из них выбран. Все они имеют разные названия, поэтому большинство решений, которые я нашел до сих пор от Google, не работают для меня.

Однако я наткнулся на этот пост, который я немного подправил, чтобы сделать этот метод расширения:

// method for checking out checkboxes for the form validation
$.validator.methods.checkboxes_checked = function(value,element,param) {
   return ($('#signup #checkboxes input[type=checkbox]:checked').length > 0);
}

... который возвращает истину или ложь в зависимости от того, установлены ли какие-либо флажки. Я не хочу использовать метод из приведенного выше дословного сообщения, так как это потребует создания отдельных правил для каждого флажка, и, поскольку у меня их много (20+), это не имеет большого смысла для меня.

Моя единственная проблема в том, что я не знаю, как подключить это к моему вызову проверки, так как у меня нет «единственного» элемента на странице, чтобы связать его (как, впрочем, все мои другие правила проверки привязанный к конкретному отдельному элементу, в то время как мой метод расширения был бы - по сути - привязан к 20+ элементам). Вот как теперь выглядит мой проверочный вызов:

// validate the form
$('#signup').validate({
   rules: {
      'bedrooms': { required: true },
      'maxrent': { required: true },
      'term': { required: true },
      'movedate': { required: true },
      'firstname': { required: true, minlength: 2 },
      'lastname': { required: true, minlength: 1, maxlength: 1 },
      'email': { required: true, email: true },
      'day_telephone': { required: true, digits: true, minlength: 10, maxlength: 10 }
   },
   errorPlacement: function(error, element) { error.css('display','none'); },
   highlight: function(element, errorClass) { 
      $(element).fadeOut(function() { $(element).fadeIn(); });
      $('label[for='+$(element).attr('name')+']').css('color','red');
   },
   unhighlight: function(element, errorClass) { $('label[for='+$(element).attr('name')+']').css('color','black'); },
   onkeyup: false
});

Я хочу, в основном, чтобы сама форма проверяла (используя плагин jQuery Validation), если мой метод расширения возвращает true перед отправкой. Как я могу добавить это в?

Answer 1

Я не знаю, как выглядит ваша формула и где вы хотите получать сообщения об ошибках, но вы пробовали добавить собственный метод проверки?

$.validator.addMethod("checkboxes", function(value, element) {
    return $('input[type=checkbox]:checked').length > 0;
}

А затем добавить его как правило только для одного из ваших флажков:

rules: {
    'idofacheckbox' : { checkboxes: true }
}

Этот флажок будет действителен, если выбран хотя бы один флажок, или недействителен, если ни один из них не установлен.

Answer 2

Решение Михаэля спасло мне жизнь.

Я просто назначил класс checkbox_1 для флажков, которые я хочу проверить. немного измените addMethod.

$.validator.addMethod("checkbox_1", function(value, element) {
return $('.checkbox_1:checked').length > 0;

}

Чтобы сгруппировать ошибку для всех флажков с заданным классом:

groups: {
   checkbox_1: "checbox1 checkbox2 checkbox3"

}

Применить правило к первому флажку как michalek

rules: {
'idofacheckbox' : { checkbox_1: true }

}

И это все. прекрасно работает, и для всех проверяемых флажков появляется только одна ошибка.

Answer 3

У меня был случай использования, когда флажки имели различное name attr, без ID и без класса, и я не мог изменить разметку. Мои правила были:

...
rules: {
  'preferred_contact_method[Email]': {
    checkone: true,
  },
  'preferred_contact_method[Phone]': {
    checkone: true,
  },
  'preferred_contact_method[Mail]': {
    checkone: true,
  },
},
...

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

$.validator.addMethod('checkone', function(value, element) {
  const boxes = $(element).closest('.js-webform-checkboxes');
  return boxes.find('input:checked').length;
}, 'Please select one.');

Кроме того, опция groups использовалась для отображения сообщения об ошибке только один раз.

Answer 4

$.validator.addMethod("checkboxes", function(value, element) {
  return $('input[type=checkbox]:checked').length > 0;
}

Любой код, который использует универсальное выражение jQuery, не гарантированно работает. Параметр 'element' должен каким-то образом использоваться, в противном случае вся страница запрашивается для любых / всех флажков.

Я полагаю, что логика необходима для идентификации других элементов в группе на основе предоставленного элемента.

Возможно, лучшим вариантом будет, если свойство 'group' было создано динамически и затем передано методу проверки. Например, используйте классы на своих входах как "atLeastOne-checkboxes group_1", и обратный вызов валидатора должен быть function(value, element, (Array) elements_in_group) {}

Answer 5

$('#myform').submit(
    function(){
        //  check the checkboxes
        if (okay_to_submit)
            forms['myform'].submit();
    }
);

Answer 6

Используйте функцию jQuery submit(), чтобы предотвратить отправку формы перед проверкой.