Parsley.js : 오류 메시지 계층

파슬리를 처음 사용하며 최종 사용자에게 유용한 UX를 제공하고자합니다. Parsley 사이트의 예는 "UX 인식에 대한 완벽한 예가 아닙니다." 어떤 오류 메시지 표시 계층 구조의 좋은 예가 있었으면 좋겠어요.Parsley.js : 오류 메시지 계층

사용자는 동일한 필드에 대해 여러 오류 메시지를 볼 수 없습니다. 한 번에 하나씩 있어야합니다. 그래서, 어떻게해야합니까?

제약 조건이 필드에 적용되는 순서에 따라 계층을 구조화하는 것이 좋습니다.

어떤 제안이나 해결책이 있습니까?

출처

2013-02-22 thedigitalman

같은 문제가있었습니다.

체크 아웃 : "변경 오류 용기"섹션에서 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; 
}

꽤 많은 크롬 HTML5 유효성 검사처럼.

출처

2013-04-20 21:17:00 Tymek

addValidator() 함수는 우선 순위 값을 세 번째 매개 변수로 사용합니다. "notblank"가 2, "regexp"가 64, "type-xxx"가 256이고 "required"가 512 인 경우를 제외하고 내장 검사기의 기본값은 30입니다. 파슬리는 가장 우선 순위가 높은 실패한 테스트에서 유효성 검사를 중지합니다 (에스). 이 설정은 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');

출처

2017-02-24 21:18:34 user9645

Parsley.js : 오류 메시지 계층

답변

관련 문제