多个字段的单个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控制台之后，我想我找到了一些可行的方法。下面的想法是防止欧芹对组进行任何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的读法是：“隐藏错误容器中具有“填充”类的所有子元素，并紧跟具有“填充”类的另一个元素。这具有将错误容器中除了第一个“填充”错误之外的所有错误隐藏起来的作用。

作为参考，填充后的解析错误容器如下所示：

<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>