Проверка JQuery на не существующий флажок - PullRequest
Новая
       38

Проверка JQuery на не существующий флажок

0 голосов
/ 26 мая 2019

У меня есть JQuery DataTable с флажками для выбора элементов в нем. Я добавил J Проверка JQuery такая, что вы не можете отправить форму, не установив хотя бы один флажок. Вот как выглядит моя проверка: 

jQuery.validator.addMethod("noApplicationSelected", function(value, element, params) { return $('.cbDisplay').length != 0; },'{0}');
$('[name="cbDisplay"]').rules('add', { noApplicationSelected: ['No checkbox selected'] });

Все работает нормально, но моя проблема в том, что если я, например, добавляю фильтр в свой поиск в DataTable, чтобы в нем не было записей (пустой DataTable), и я пытаюсь отправить форму, она отправляет, даже если я не выбрал любые флажки. Я думаю, что причина в том, что проверка не может связывать правила на флажках, потому что они не существуют.

Как я могу решить эту проблему?

Редактировать 1: Будет ли добавление проверки, которая проверяет, является ли DataTable пустым и установлен ли флажок, решит мою проблему? Но проблема, с которой я сталкиваюсь, заключается в том, с чем мне связать эту проверку? Я думаю, я мог бы привязать его к флажку «Выбрать все / снять все», но это не имеет смысла

Редактировать 2:

Демо-версия проблемы: https://jsfiddle.net/mu79L32w/14/

Ответы [ 2 ]

0 голосов
/ 26 мая 2019

Как вы и подозревали, вы не можете привязать проверку к любому входу, который еще не существует.

Я не вижу достаточного количества кода для демонстрации, поэтому ниже приведены некоторые обобщения:

  1. Вам не нужно писать собственный метод для создания флажков required с помощью этого плагина.Если флажки находятся в группе, совместно использующей один и тот же name, то required сделает по крайней мере один из группы обязательным.См .: jsfiddle.net / q357zcwy / 1 /

  2. Весь смысл метода .rules() заключается в динамическом добавлении правил удаления после того, как плагин уже был инициализированна форме.Таким образом, если вы динамически добавляете input, то вызывайте .rules() для этого input после того, как было создано.См .: jsfiddle.net / q357zcwy / 2 /

  3. Если вы хотите добавить только required, то самый простой способ справиться с этим - поставить required="required" атрибут на входе, а мой элемент № 2 выше отрицается.Вам не нужно беспокоиться о том, существует ли он или когда звонить .rules().Просто создайте input, который включает этот атрибут, и плагин автоматически подберет его.См .: jsfiddle.net / q357zcwy / 3 / 

    <input type="checkbox" name="foo" required="required" ....

  4. По умолчанию скрытые или невидимые поля всегда игнорируются.Если ваш плагин скрывает какие-либо поля, которые вы пытаетесь проверить, то вам нужно переопределить это поведение, используя опцию ignore.Установите ignore в [] («ничто»), чтобы ничего не игнорировалось и все проверялось. 

    ignore: []

РЕДАКТИРОВАТЬ : больше заметок после просмотра ваш jsFiddle :

Метод .validate() вызывается один раз для инициализации плагина на form. Обычно при загрузке страницы .Однако он есть в функции, которая вызывается вашим обработчиком click, что означает, что проверка не инициализируется до тех пор, пока не будет нажата кнопка, и повторно вызывается без необходимости каждый раз при нажатии кнопки.

Плагин DataTables действительно полностью удаляет строки при поиске / фильтрации таблицы.Хотя плагин проверки может обрабатывать невидимые или скрытые элементы (см. Пункт № 4 выше), никто не может разумно ожидать, что он будет обрабатывать элементы, которых больше нет в DOM.Мне кажется странным, что DataTables не может просто скрыть эти строки или сделать их невидимыми, а не полностью удалить.

Решение Яна интересно, поскольку оно перебирает объект DataTables, ища проверенные элементы,Однако, похоже, нет способа правильно интегрировать эту функцию в работу плагина jQuery Validate.В то время как плагин проверки обычно привязан к каждому входу и автоматически показывает / скрывает сообщения на основе правил, этот «обходной путь» неуклюже запихивается в submitHandler, который обычно вызывается после форма действительна.Он также не может использовать стандартные сообщения проверки, highlight, unhighlight, success, invalidHandler или , а также другие встроенные функции .

может использовать способ showErrors для программного отображения и скрытия сообщений по умолчанию на основе итерации объекта DataTables.Однако этот обходной путь будет слишком сложным.Вам также необходимо собрать имя (имена) проверенного объекта из объекта DataTable, чтобы узнать, какие сообщения переключать.Тогда, если ни одна из строк не существует, когда вы хотите проверить, вам нужно будет найти другой способ вызвать проверку.Поскольку почти все функциональные возможности плагина jQuery Validation по умолчанию будут перезаписаны, в действительности может иметь смысл написать собственную проверку формы с нуля.Никакой готовый плагин проверки не сможет обрабатывать элементы ввода, которые не существуют.

0 голосов
/ 26 мая 2019

Если вы попытаетесь найти входные данные / флажки внутри отображаемого документа, вы получите только визуализированные элементы элемента datatables.Это означает, что возможно, что вы не найдете какой-либо флажок-элемент в документе, если используется фильтр таблиц данных. Если строка не отображается в элементе datatables, она удаляется из визуализированной таблицы , и в результате все элементы в этой строке также недоступны для элемента формы переноса.

Но вы можете перебирать данные / строки объекта DataTable-Object с помощью javascript.

Вот пример того, как проверить, установлен ли какой-либо флажок при отправке формы с использованием jquery-validates submitHandler. 

$(document).ready(function() {

  let table = $('#example').DataTable({
    "columns": [
      { "data": "column_a" },
      { "data": "column_b" }
    ]
  });
  
  function isAnythingChecked() {
    let foundChecked = false;
    let inputs = table.rows().nodes().to$().find('input');
    for (let input of inputs) {
      if (input.checked) foundChecked = true;
    }
    return foundChecked;
  }
  
  $("#myForm").validate({
    submitHandler: function(form) {
      if (isAnythingChecked()) {
        alert('Yeah! A checkbox is selected');
        //form.submit();
      } else {
        alert('Oh no! No checkbox selected');
      }
    }
  });

});
<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.0/dist/jquery.validate.min.js"></script>

<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>

<form id="myForm">

  <table id="example" class="display" style="width:100%">
    <thead>
      <tr>
        <th>Column A</th>
        <th>Column B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"> Checkbox 1</td>
        <td>Test</td>
      </tr>
      <tr>
        <td><input type="checkbox"> Checkbox 2</td>
        <td>Lorem</td>
      </tr>
      <tr>
        <td><input type="checkbox"> Checkbox 3</td>
        <td>ipsum</td>
      </tr>
    </tbody>
  <table>

  <button id="btn" type="submit">Submit</button>
  
</form>
...