jQuery валидатор не работает для списков флажков при использовании класса CSS для проверки

Question

У меня есть несколько таких флажков:

<input class="mandatory" name="Notes8~1" id="Notes8~1" type="checkbox" value="Yes">Option 1<br>
<input class="mandatory" name="Notes8~2" id="Notes8~2" type="checkbox" value="Yes">Option 2<br>
<input class="mandatory" name="Notes8~3" id="Notes8~3" type="checkbox" value="Yes">Option 3<br>

(да, я знаю, что теги <input> не закрыты, возможно, мне нужно это исправить!)

И я хочу потребовать, чтобы пользователь проверил хотя бы один из них. Итак, у меня есть это JavaScript:

jQuery.ready({function() {jQuery.validator.addClassRules('mandatory', {required: true});}});

, чтобы добавить проверку к флажкам. Однако это не работает; после пошагового выполнения кода это выглядит так, как будто выполняется код проверки, но он каким-то образом проходит, даже если все флажки пусты. Как я могу потребовать от пользователя установить хотя бы один флажок? Я смог сделать это, дав им одно и то же имя Notes8, но это не сработает в этом приложении, потому что другой код полагается на то, что они имеют уникальные имена.

Answer 1

Распространенным способом для массивизации группы флажков ( или радио входы) является использование name=*[].
Назначение правила для селектора "Notes8[]" prop и использовать minlength: 1 свойство:

jQuery(function($) { // DOM ready and $ alias in scope

  $("#myForm").validate({
    rules: {
      "Notes8[]": {
        required: true,
        minlength: 1
      }
    },
    messages: {
      "Notes8[]": "Select at least one"
    }
  });

});

<form id="myForm">
  <label>
    <input class="mandatory Notes8_group" name="Notes8[]" type="checkbox" value="n8_1_yes"> Option 1
  </label>
  <label>
    <input class="mandatory Notes8_group" name="Notes8[]" type="checkbox" value="n8_2_yes"> Option 2
  </label>
  <label>
    <input class="mandatory Notes8_group" name="Notes8[]" type="checkbox" value="n8_3_yes"> Option 3
  </label>

  <button type="submit">SEND</button>
</form>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>

Престижность: { ссылка }

Пользовательский валидатор для нескольких флажков

Если вы хотите для создания вашего собственного валидатора это должно дать вам go:

jQuery(function($) { // DOM ready and $ alias in scope

  function validateMultiple (selector, n, isExactlyN) {
    const totChecked = $(selector).filter(':checked').length;
    return !(isExactlyN ? totChecked == n : totChecked >= n);
  }
  

  $('#myForm').on('submit', function(ev) {
    if (validateMultiple('.Notes8_group', 1)) {
      ev.preventDefault();
      alert("Select at least one"); // Your custom error here
    }
  });

});

<form id="myForm">
  <label>
    <input class="mandatory Notes8_group" name="Notes8~1" type="checkbox" value="n8_1_yes"> Option 1
  </label>
  <label>
    <input class="mandatory Notes8_group" name="Notes8~2" type="checkbox" value="n8_2_yes"> Option 2
  </label>
  <label>
    <input class="mandatory Notes8_group" name="Notes8~3" type="checkbox" value="n8_3_yes"> Option 3
  </label>

  <button type="submit">SEND</button>
</form>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>

Вы можете использовать такую ​​функцию, как:

Пример 1: Хотя бы один :

validateMultiple('.Notes8_group', 1)

Пример 2: Ровно два :

validateMultiple('.Notes8_group', 2, true)

Дополнительный совет: Если вы не можете (по какой-то причине) назначить групповые классы , вы могли бы использовать селектор атрибута []:

validateMultiple('[name^="Notes8~"]', 1)

, который будет нацеливаться на name, который начинается с "Notes8~", поэтому все name = Notes8~1, Notes8~2 и Notes8~3 элементов.