在未现有复选框上进行jQuery验证



i有一个jQuery数据表,该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'] });

一切正常,但我的问题是,如果我在数据表中添加过滤器,以使得不存在条目(空数据表(,并且我尝试提交表单,即使我没有选择任何复选框。我认为的原因是因为验证无法在复选框上绑定规则,因为它们不存在。

如何解决此问题?

编辑1:是否会添加一些验证,以检查数据是否为空并且选择复选框解决我的问题?但是我看到的问题是我将此验证绑定到什么?我想我可以将其绑定到Select All/Delect所有复选框中,但这是没有意义的

编辑2:

probelm的演示:https://jsfiddle.net/mu79l32w/14/14/pp>

<<div class =" ans">

如果您尝试找到输入/复选框,显示的文档,您只能获得DataTable-element的渲染元素。这意味着,如果使用数据表的过滤器,则可能在文档中找不到任何复选框元素。如果在DataTables-元素中未显示一行,则将其从渲染表中删除,结果该行中的所有元素也无法用于包装表单元素。

,但是您可以使用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>

当您怀疑时,您无法将验证绑定到尚不存在的任何输入。

我看不到演示的足够代码,因此以下一些仿制药:

  1. 您不需要编写使用此插件制作复选框required的自定义方法。如果复选框在一个共享相同name的组中,则required将在组中至少制造一个。请参阅:jsfiddle.net/q357zcwy/1/

  2. .rules()方法的全部要点用于在插件上在表单上初始化插件后动态添加删除规则。因此,如果您动态添加input,则在创建之后,在该input 上调用.rules()。请参阅: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设置为[](" Nothing"(,以便什么都没有忽略,一切都得到了验证。

    ignore: []
    

edit :看到JSFIDDLE之后的更多注释:

  1. .validate()方法被调用一次,以初始化form上的插件。通常在页面加载上。但是,您将其包含在click处理程序调用的函数中,这意味着在单击按钮并每次单击按钮时都不必要地调用验证。

  2. 当您搜索/过滤表时,DataTables插件确实正在完全删除行。尽管验证插件可以处理隐形或隐藏元素(请参见上面的项目#4(,但没有任何人可以合理地期望它处理DOM中不再存在的元素。我觉得奇怪的是,数据表不仅可以隐藏这些行或使它们看不见而不是完全删除。

  3. JAN解决的解决方案很有趣,因为它通过寻找检查项目的DataTables对象迭代。但是,似乎没有一种方法可以将此功能正确整合到jQuery Validate插件的操作中。虽然验证插件通常绑定到每个输入并根据规则自动显示/隐藏消息,但此"解决方法"被笨拙地推入submitHandler中,通常仅调用 >表格有效。它也无法利用默认验证消息,highlightunhighlightsuccessinvalidHandler或任何其他内置功能。

可能是一种利用showErrors显示&amp;的方法。通过DataTables对象,基于迭代以编程方式隐藏默认消息。但是,这种解决方法会变得过于复杂。您还需要从数据表对象收集检查对象的名称,以了解要切换的消息。然后,如果您要验证时都不存在,则必须找到另一种触发验证的方法。由于无论如何,jQuery验证插件的几乎所有默认功能无论如何都会过多写入,因此实际上,只要从头开始编写自己的表单验证实际上可能更有意义。没有现成的验证插件将能够处理不存在的输入元素。

相关内容

  • 没有找到相关文章

最新更新