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

Parsley.js - Radiobuttons with same name in different forms on same page are validated together

本文关键字：验证 一起 单选按钮 一页 js Parsley      更新时间：2023-09-26

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

在一个页面上，我有两种不同的形式(注册，客人退房)。两者都使用几乎相同的表单元素，然后具有相同的name属性。在提交时，只有当前的表单得到验证，一切工作正常，例如文本输入字段。

BUT:单选按钮和复选框在Parsley.js中被不同地处理-因此在提交客人结账表单(在标记中是第二)时，错误消息和类被添加到注册表单中。这只适用于这两种输入类型。

看起来欧芹对这些元素属于哪一种形式没有影响。它只查看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的定义中，我们还添加了当前表单(fieldInstance.$element[0].form.id)的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__);

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

相关文章：