Parsley.js - 在同一页面上以不同形式具有相同名称的单选按钮一起验证答案

【问题标题】：Parsley.js - Radiobuttons with same name in different forms on same page are validated togetherParsley.js - 在同一页面上以不同形式具有相同名称的单选按钮一起验证
【发布时间】：2014-06-13 15:20:20
【问题描述】：

我已经搜索了将近 2 天，但似乎找不到这个问题的答案。

在一个页面上，我有两种不同的表格（注册、客人结帐）。两者都使用几乎相同的表单元素，然后具有相同的名称属性。提交时，只有当前表单得到验证，一切正常，例如文本输入字段。

但是： Parsley.js 对单选按钮和复选框的处理方式不同 - 因此，在提交访客结帐表单（在标记中排名第二）时，错误消息和类将添加到注册表单中。这实际上仅适用于这两种输入类型。

Parsley 似乎对这些元素属于哪种形式没有影响。它只是查看名称属性。这有点烦人，尤其是因为其他输入类型共享相同的名称属性没有问题。

这是 HTML 的代码 sn-p：

<form id="registrationForm" data-validate-form="true" ...>
    <label>Mrs</label>
    <input type="radio" name="salutation" value="mrs"/>
    <label>Mr</label>
    <input type="radio" name="salutation" value="mr" data-validate-required="true"/>
    <label>Firstname</label>
    <input type="text" name="firstname" data-validate-required="true"/>
</form>

<form id="guestcheckout" data-validate-form="true" ...>
    <label>Mrs</label>
    <input type="radio" name="salutation" value="mrs"/>
    <label>Mr</label>
    <input type="radio" name="salutation" value="mr" data-validate-required="true"/>
    <label>Firstname</label>
    <input type="text" name="firstname" data-validate-required="true"/>
</form>

这里是 JavaScript 设置：

$('[data-validate-form]').parsley({
    namespace : 'data-validate-',
    errorsWrapper : '<div></div>',
    errorTemplate : '<span></span>',
    errorClass : 'error',
    successClass : 'success'
});

有没有其他人遇到过这个问题？哦，我无法更改名称属性。

提前感谢您的帮助！

【问题讨论】：

标签： javascript html parsley.js

【解决方案1】：

所以，我和我的同事找到了解决方案。

在handleMultiple 方法中，我们定义了元素的当前表单并将其ID 添加到multiple 字符串中：

// Add current form id to name to differ between several forms on same page.
var currentForm = $('#' + this.$element[0].form.id);
multiple = currentForm.attr('id') + '-' + multiple;

然后我们将currentForm 添加到输入选择器中，如下所示：

$('input[name="' + name + '"]', currentForm).each(function () {...}

这样可以确保只选择正确格式的输入。

然后转到setupField 方法。在 _ui.errorsWrapperId 的定义中，我们还添加了当前表单的 ID (fieldInstance.$element[0].form.id)。

原文：

_ui.errorsWrapperId = 'parsley-id-' + ('undefined' !== typeof fieldInstance.options.multiple ? 'multiple-' + fieldInstance.options.multiple : fieldInstance.__id__);

新：

_ui.errorsWrapperId = 'parsley-id-' + ('undefined' !== typeof fieldInstance.options.multiple ? 'multiple-' + fieldInstance.$element[0].form.id + '-' + fieldInstance.options.multiple : fieldInstance.__id__);

这是正确打印错误消息所必需的。

也许这对其他人也有帮助。

【讨论】：