parsley.js - 多个字段的单个 parsley.js 错误消息

Question

我正在寻找一种对一组输入字段使用单个欧芹验证错误消息的方法。这方面的主要示例是地址输入字段，但我相信其他人可以想出类似的示例，这可能会有用。

<div id="error-container"></div>
<input name='address1' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">
<input name='address2' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">
<input name='address3' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">

现在使用上面的代码会导致 3 条不同的错误消息，但我想设置一个场景，如果任何输入无效，则只显示一条消息。

提前致谢

更新

在体验了一些 JS 控制台的乐趣之后，我想我找到了一些有用的东西。下面的想法是防止 parsley 对组进行任何 UI 更改，并在每次验证其中一个元素时触发对整个组的检查。这可能不是最好的做事方式，但它似乎适用于我的单个测试用例。我认为这可以重新加工成验证器，以便我将来可以将它重新用于其他输入集。

<div id="error-container"></div>
<input name='address1' data-parsley-ui-enabled='false' data-parsley-trigger='change' data-parsley-group='address-grp' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">
<input name='address2' data-parsley-ui-enabled='false' data-parsley-trigger='change' data-parsley-group='address-grp' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">
<input name='address3' data-parsley-ui-enabled='false' data-parsley-trigger='change' data-parsley-group='address-grp' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">

var $addressFields = $("[data-parsley-group='address-grp']");
addressFields.each(function(index, element) {
  $(element).parsley().on('field:validated', function(parsleyField) {
    var fieldOptions = parsleyField.actualizeOptions().options;
    var classHandler = fieldOptions.classHandler(parsleyField);
    var container = $(fieldOptions.errorsContainer);
    classHandler.removeClass(fieldOptions.successClass);
    classHandler.removeClass(fieldOptions.errorClass);
    var valid = parsleyField.parent.isValid(fieldOptions.group);
    if(valid) {
      console.log("Valid");
      classHandler.addClass(fieldOptions.successClass);
      container.html("");
    } else {
      console.log("Invalid");
      classHandler.addClass(fieldOptions.errorClass);
      container.html("Error");
    }
  });
});

Answer 1

如果将特定类添加到错误容器中，则可以使用一些 CSS 巧妙地完成此操作。

HTML:

<div id="error-container" class="parsely-single-error"></div>

CSS:

.parsely-single-error .filled ~ .filled {
    display: none;
}

---

解释

CSS 是这样写的:“隐藏错误容器中具有‘filled’类的任何子元素，并出现在另一个具有‘filled’类的元素之后”。这具有在错误容器中隐藏除第一个“已填充”错误之外的所有错误的效果。

作为引用，填充后的解析错误容器如下所示:

<div class="parsely-single-error" id="error_container">
    <span class="help-block filled" id="parsley-id-5">
        <div class="parsley-required">This value is required.</div>
    </span>
    <span class="help-block" id="parsley-id-7"></span>
    <span class="help-block filled" id="parsley-id-9">
        <div class="parsley-required">This value is required.</div>
    </span>
    <span class="help-block filled" id="parsley-id-11">
        <div class="parsley-required">This value is required.</div>
    </span>
    <span class="help-block" id="parsley-id-13"></span>
</div>