Parsley validator(폼유효성 검증) UI와 이벤트 #4

파슬리의 UI들의 작동 방식과 클래스들, 그리고 이벤트에 대하여 알아봅니다.

Parsley UI/UX

파슬리는 클래스들, 오류 메시지, 포커스 혹은 페이지를 변경하는 트리거 이벤트들에 응답하는 UI/UX 컴포넌트를 포함한다. UX 친화적이기 위해 노력하고 있으며, 파슬리 UI의 모토는 아래와 같다.

• 최소화된 문자 검증 : 파슬리는 3글자보다 적은 입력에선 기본적으로 검증을 진행하지 않는다. 너무 빠른 검증으로 오류 메세지를 출력하여 사용자를 불편하게 하지 말자.
• 한번에 한가지 오류 : 필드의 몇몇이 검증을 통과하지 못하면 가장 중요한 하나를 보여주게 되며, 그것은 파슬리의 우선순위에 따른다.
• 빠른 오류 제거 : 필드가 유효하지 않음을 감지했을때, 각각의 키입력(keypress)을 확인하여 필드가 유효화되면 재빨리 오류 메세지를 없앤다.
• 에러에 포커스를 맞춤 : 폼이 제출되면, 첫번째 에러 필드에 포커스를 맞추어 사용자가 쉽게 에러를 수정할 수 있게 한다.

물론 이것은 절대적인 맞춤형이고 당신이 원할 UX 동작을 구성하는 방법을 아래에서 볼 수 있다.

클래스들과 템플릿

파슬리는 UI 검증 결과 표시를 용이하게 하기 위해, 클래스와 요소를 이용한다. 기본적으로 검증 결과에 따라 라디오/체크박스 inputs 의 부모와 단순한 text, textarea, select inputs 자신에 parsley-success 와 parsley-error 클래스를 추가한다.

클래스들의 이름 및 클래스가 위치하게되는 요소 또한 변경할 수 있습니다.

폼에서의 UI

Name	API	Description
UI Enabled #2.0	data-parsley-ui-enabled="false"	UI를 활성화 혹은 비활성화한다.
Focus #2.0	data-parsley-focus="first"	폼 유효성 검사에 실패시 필드에 포커스를 한다. 가능한 값은: 'first' 'last' 'none'

UI와 관련된 폼에 직접 설정하는 속성들입니다.

필드에서의 UI

Name	API	Description
Trigger #2.0	data-parsley-trigger="change"	항목의 유효성 검사를 트리거할 하나 또는 여러 자바스크립트 이벤트를 지정한다. data-parsley-trigger="focusin focusout"처럼 공백으로 복수의 자바스크립트 이벤트를 지정할 수 있다. jQuery 이벤트종류
No focus #2.0	data-parsley-no-focus	검증에 실패한 필드에 포커스를 하지 않는다.(first 포커스 전략이 켜져있는 경우, 다음 필드에 포커스가 맞춰지고 last 포커스 전략이 켜져있다면 이전 필드가 포커스를 가진다. )
Validation threshold #2.0	data-parsley-validation-threshold="10"	모든 key- 이벤트들에 대하여 필드가 문자의 특정 숫자를 가질때까지 위의 트리거 옵션과 함께 사용한다. 기본값은 3이다.
Class handler #2.0	data-parsley-class-handler="#element"	파슬리UI가 어디에 오류 및 성공 클래스를 추가할지 기존의 DOM 컨테이너에서 지정한다. 이는 자바스크립트를 사용해 콜백함수로 구성하는 것도 가능하다 주석소스를 참조하라
Errors container #2.0	data-parsley-errors-container="#element"	파슬리UI가 오류를 넣어야하는 곳을 기존의 DOM 컨테이너에서 지정한다. 이는 자바스크립트를 사용해 콜백함수로 구성하는 것도 가능하다 주석소스를 참조하라
Error message #2.0	data-parsley-error-message="my message"	필드에 고유한 전역 메세지를 맞춤화한다.
Validator error message #2.0	data-parsley-`constraint`-message="my message"	필드 제약 조건에 대한 오류 메시지를 맞춤화한다. 예: data-parsley-required-message="this field is required"

필드에 이벤트 트리거를 지정하는 중요한 부분이기도 하고, 원하는 요소에 에러메세지를 출력할 수 있는 부분이기도 합니다. data-parsley-required-message="회원 아이디를 입력하세요." 처럼 기본적으로 정해진 오류 메세지외에 특정 메세지를 입력해서 해당 필드에만 다른 오류 메세지를 출력하는 것이 도움이 됩니다.

Parsley 이벤트

파슬리는 파슬리UI가 작동할 수 있도록 이벤트를 트리거한다. 게다가 이벤트가 제대로 작동하는 경우에 몇가지 강력한 마법을 수행할 수 있다.

성능상의 이유로, 파슬리는 jQuery 이벤트를 사용하지 않지만 이벤트를 수신할 수 있는 API는 매우 유사하다:

$('#some-input').parsley().on('field:success', function() {
  // In here, `this` is the parlsey instance of `#some-input
});

가령, 순차적으로 입력을 요구하는 필드가 있다고 할때, 첫번째 필드가 오류없이 통과하면 두번째 필드가 활성화되는 코드를 작성할 수 있습니다. 기본적으로 첫번째 필드만 활성화해놓고 이후의 필드들은 disabled 시켜놓으면 됩니다.

$('#some-input').parsley().on('field:success', function() {
  $('#next-input').removeAttr('disabled');
});

jQuery 이벤트와 마찬가지로 파슬리 이벤트는 bubble up 된다. 예를 들면, 필드를 검증하려 할 경우, field:validate 이벤트는 파슬리 필드 인스턴스에 첫번째로 트리거될 것이고 파슬리 폼 인스턴스(폼에 필드가 결합되었다면)에 다음으로 전파되고 마지막으로 상위 레벨의 window.Parsley에 전파된다.

window.Parsley.on('field:error', function() {
  // This global callback will be called for any field that fails validation.
  console.log('Validation failed for: ', this.$element);
});

이벤트 목록

Name	Instance	Fired by	Description
form:init #2.1	ParsleyForm	new Parsley()	폼이 처음 결합될 때 트리거
form:validate #2.1	ParsleyForm	.validate()	폼 검증의 유효성 검증이 트리거될때 그 검증 전에 트리거된다.
form:success #2.1	ParsleyForm	.validate()	폼 검증의 유효성 검증이 트리거될때 그 검증이 성공한 후에 트리거된다.
form:error #2.1	ParsleyForm	.validate()	폼 검증의 유효성 검증이 트리거될때 그 검증이 실패한 후에 트리거된다.
form:validated #2.1	ParsleyForm	.validate()	폼 검증의 유효성 검증이 트리거될때 그 검증이 완료된 후(성공 혹은 오류) 트리거된다.
form:submit #2.2	ParsleyForm	submit()	폼 검증의 성공 후 폼이 실제로 전송되기 직전에 트리거된다. 양식 제출을 방해할 수 있는 기본값을 방지한다?
field:init #2.1	ParsleyField	new Parsley()	필드가 처음 바인딩될때 트리거된다.
field:validate #2.1	ParsleyField	.validate()	필드 검증이 트리거될때 그것의 검증전에 트리거된다.
field:success #2.1	ParsleyField	.validate()	필드 검증이 성공하면 트리거된다.
field:error #2.1	ParsleyField	.validate()	필드 검증이 실패했을경우 트리거된다.
field:validated #2.1	ParsleyField	.validate()	필드 검증이 (성공 또는 오류) 완료되면 트리거된다.

다음장에서는 Parsley 의 추가 플러그인인 Parsley remote와 Parsley extra에 대하여 알아봅니다.