Question

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

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

但是：Parsley.js对Radiobuttons和复选框的处理方式不同 - 所以在提交访客结帐表单（标记中的第二位）时，错误消息和类会被添加到注册表单中。这只是两种输入类型的情况。

看起来Parsley并没有对这些元素属于哪种形式产生影响。它只是查看name属性。这有点令人讨厌，特别是因为其他输入类型共享相同名称属性没有问题。

以下是HTML的代码段：

<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'
});

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

提前感谢您的帮助！

Answer 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__);

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

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

Parsley.js - 同一页面上不同形式的同名Radiobuttons一起验证

1 个答案: