Question

我是Parsley的新手，希望为我的最终用户提供良好的用户体验。 Parsley网站上的例子无疑是“不是用户体验意识的完美典范”。这让我希望有一个错误消息显示层次结构的好例子。

用户永远不应该看到同一字段的多条错误消息;它应该只是一次一个。那么，我该如何实现呢？

我建议根据约束应用于字段的顺序来构建层次结构。

有任何建议或解决方案吗？

Answer 1

我遇到了同样的问题。

结帐：parsleyjs.org/documentation.html#parsleyclasses 并使用“更改错误容器”部分中的代码。
将此添加到您的CSS：.parsley-container{display:none} input:focus+.parsley-container{display:block}

我为自己做了更多的事情：

.parsley-container {
  display: none;
  position: absolute;
  margin: 10px 0 0 0;
  padding: 2px 5px;
  z-index: 2;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid #888888;
}
.parsley-container:after, .parsley-container:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.parsley-container:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
}
.parsley-container:before {
  border-color: rgba(136, 136, 136, 0);
  border-bottom-color: #888888;
  border-width: 11px;
  left: 50%;
  margin-left: -11px;
}
input:focus + .parsley-container,
input:active + .parsley-container {
  display: block;
}

非常类似于Chrome HTML5验证。

Answer 2

addValidator（）函数接受优先级值作为第三个参数。内置验证器的默认值大多为30，除了＆＃34; notblank＆＃34;是2，＆＃34; regexp＆＃34;是64，＆＃34; type-xxx＆＃34;是256和＆＃34;必需＆＃34;是欧洲的。欧芹停止验证最高优先级的失败测试。这可以使用priorityEnabled设置进行配置。为了一次只获得一个，您可以创建每个具有不同优先级的自定义验证器：

window.Parsley.addValidator('check3', function(val, req) {
    return (val == whatever3(val, req));
// +--- Higher than check2
// v
}, 103).addMessage('en', 'check3', 'Failed check 3');

window.Parsley.addValidator('check2', function(val, req) {
    return (val == whatever2(val, req));
// +--- Higher than check1
// v
}, 102).addMessage('en', 'check2', 'Failed check 2');

window.Parsley.addValidator('check1', function(val, req) {
    return (val == whatever1(val, req));
// +--- Higher than many, lower than "required (512)" and "type-xxx (256)"
// v
}, 101).addMessage('en', 'check1', 'Failed check 1');

Parsley.js：错误消息层次结构

2 个答案: