Error handling Parsley.js:错误消息层次结构
我是欧芹新手,希望为我的最终用户提供一个好的用户体验。欧芹网站上的例子不可否认是“UX意识的完美例子”。这让我希望有一个错误消息显示层次结构的好例子 用户永远不会看到同一字段的多条错误消息;一次只能有一个。那么,我该如何做到这一点呢 我建议根据约束应用于字段的顺序构造层次结构Error handling Parsley.js:错误消息层次结构,error-handling,validation,parsley.js,Error Handling,Validation,Parsley.js,我是欧芹新手,希望为我的最终用户提供一个好的用户体验。欧芹网站上的例子不可否认是“UX意识的完美例子”。这让我希望有一个错误消息显示层次结构的好例子 用户永远不会看到同一字段的多条错误消息;一次只能有一个。那么,我该如何做到这一点呢 我建议根据约束应用于字段的顺序构造层次结构 有什么建议或解决办法吗?我也有同样的问题 退房: 并使用“更改错误容器”部分的代码 将此添加到CSS:.parsley容器{display:none}输入:focus+.parsley容器{display:block} 我
有什么建议或解决办法吗?我也有同样的问题
.parsley容器{display:none}输入:focus+.parsley容器{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验证非常相似。addValidator()函数接受优先级值作为第三个参数。大多数内置验证器的默认值是30,除了“notblank”是2,“regexp”是64,“type xxx”是256,“required”是512。Parsley停止验证最高优先级的失败测试。这可通过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');