Parsley.js：錯誤消息層次

Question

我是Parsley的新手，並且希望爲我的最終用戶提供良好的用戶體驗。毫無疑問，Parsley網站上的例子「不是UX意識的完美例子」。這讓我希望有一個錯誤消息顯示層次結構的好例子。

用戶不應該看到同一字段的多個錯誤消息;它應該只能是一次一個。那麼，我該如何做到這一點？

我會建議根據約束應用於字段的順序來構建層次結構。

任何建議或解決方案？

Answer 1

我有同樣的問題。

1. 退房：從「更改錯誤容器」部分parsleyjs.org/documentation.html#parsleyclasses 和使用的代碼。
2. 添加到您的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（）函數接受優先級值作爲第三個參數。除了「notblank」爲2，「regexp」爲64，「type-xxx」爲256以及「required」爲512之外，內置校驗器的默認值爲30。Parsley停止驗證優先級最高的失敗測試（S）。這可以使用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');