javascript - Parsley.js-同一页面上具有不同名称的同名单选按钮将一起验证

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

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

但是：Parsley.js对单选按钮和复选框的处理方式有所不同-因此，在提交来宾结帐表单（在标记中排第二）时，错误消息和类将添加到注册表单中。确实只有这两种输入类型才是这种情况。

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

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

在此先感谢您的帮助！

最佳答案

因此，我和我的同事找到了解决方案。

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

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

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

关于javascript - Parsley.js-同一页面上具有不同名称的同名单选按钮将一起验证，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24208800/