parsley.js 在尝试验证复选框时“失败”答案

【问题标题】：parsley.js 'fails' when trying to validate checkboxparsley.js 在尝试验证复选框时“失败”
【发布时间】：2017-11-22 21:54:27
【问题描述】：

我们正在重新设计一个网站，其中一部分重新设计涉及使屏幕阅读器等可以访问该网站。我正在使用最新版本（2.8.0）。这就是正在发生的事情 --- 我们表单中的所有文本、选择和文本区域字段的验证工作完美。为了便于访问，复选框和单选输入被包装在标签中。一组复选框的 html 如下所示：

<div class="form-group">
    <p id="applicant_type_desc" style="margin-bottom: 6px;"><strong>I am: <span class="text-danger" aria-hidden="true">*</span><span class="sr-only">Required</span></strong> <em class="small">(check all that apply)</em></p>
    <div class="checkbox">
        <label id="applicant_type_patient_desc">
            <input type="hidden" name="applicant_type_patient" id="" value="N">
            <input type="checkbox" name="applicant_type_patient" id="applicant_type_patient" value="Y" {checked_applicant_type_patient} aria-labelledby="applicant_type_desc applicant_type_patient_desc" data-parsley-multiple="type" data-parsley-error-message="Please specify whether you are a patient, relative, employee or other."> 
            A patient
        </label>
    </div>

后面是更多没有错误消息的复选框 div，并以 for form-group 包装器的结束 div 结束。

如果我加载表单并单击“提交”，则所有文本字段都会正确验证。如果我在上面的复选框中添加“必填”，当单击“提交”时，什么也不会发生，并且提交的表单根本没有验证。

当我尝试验证按要求设置的单选按钮时，也会发生同样的事情。

有一些自定义的 jQuery 和 parsley 代码创建一个 div 来保存所有错误消息并将错误消息转换为指向字段 id 的链接，以便屏幕阅读器可以跟随它们并专注于错误的字段。但是恕我直言，这应该不会影响表单验证的原因。

我真的很困惑。

仅供参考 - 我使用早期版本 (2.0.3) 的欧芹进行了尝试，验证确实有效，尽管我所有的自定义错误处理都被忽略了。

任何见解将不胜感激。

【问题讨论】：

你能发布一个活生生的例子吗？
感恩节过后会这样做。
我终于能够创建以下小提琴：[link]jsfiddle.net/5bbfdhtp。在这个版本中，如果您运行它并单击提交，您将看到文本字段的验证正常工作。然后转到 html 并将“必需”添加到第一个复选框字段，实际上小提琴失败了。
更有趣的是，在尝试验证单选按钮集时，当您 lcik 提交时，您会非常简短地看到文本字段错误，然后提交。
@Marc-AndréLafortune - 有什么想法吗？

标签： validation checkbox parsley.js

【解决方案1】：

事实证明，parsley 对文本、文本区域和选择的 errorswrapper 元素的处理方式与复选框和单选按钮的处理方式不同。

text、textarea 和 select 的起始包装元素包含 parsley-data-id 属性，而复选框和单选按钮元素包含 parsley-data-multiple 属性，无论该属性是由 parsley 生成还是在 html 中手动输入。

我的代码正在寻找 parsley-data-id，当然 jquery 选择器失败并产生了错误。当我们在 chrome 检查器中查看页面时，一位同事能够为我发现这一点。一旦我看到错误，对表单进行简单的调整：错误事件函数允许一切正常。

【讨论】：