更新

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读取，＆＃34;隐藏错误容器中具有类＆＃39;填充＆＃39;的任何子元素。并且来到另一个具有类＆＃39;填充＆＃39;＆＃34;的元素。这样可以隐藏除第一个“填充”之外的所有内容。错误容器中的错误。

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

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

Answer 2

我不确定有什么好方法可以做到这一点。

你可以尝试配置它以便将错误放在同一个容器中，然后使用CSS只显示它们的:first吗？

多个字段

更新

2 个答案:

说明