Parsley validator(폼유효성 검증) 소개 및 설치, 구성요소 살펴보기 #1

폼의 유효성을 검증하는 플러그인들 중에 Parsley 라는 jQuery 플러그인이 있습니다. 디자인적인 면도 고려해서 클래스를 DOM에 붙여 주기 때문에 쉽게 활용할 수 있을꺼라 생각해 관련 문서를 발번역하였고, 이를 수정해서 아래의 내용을 작성하였습니다. 참고가 되시길 바랍니다.

폼(form)안에 존재하는 각각의 입력양식들, <input>, <textarear>, <select>와 같은 요소들을 필드(field)라고 부릅니다.

Parsley 소개

여기서 설명하는 파슬리는 먹는 그 파슬리는 아니고 자바스크립트로 만든 폼 검증 라이브러리이다. 실제 검색을 하면 먹는 파슬리만 주구장창 검색되니, Parsley js로 검색하길 바란다;;. 서버로 폼을 제출하기전에 작성한 폼에 대한 피드백을 사용자에게 제공하여, 서버부하를 줄이고 폼 검증에 소모되는 사용자의 시간을 절약하는게 사용목적이다.

HOME

Parsley

DOWN

Parsley 다운로드

자바스크립트 폼 검증이 반드시 필요한 것은 아니고, 이것을 사용한다고 해서 강력한 백엔드 서버의 유효성 검사를 대체하진 못한다. 일반적인 폼 유효성 검사를 프론트엔드 측에 사용하여 사용자 경험을 최대화시키고, 백엔드 측에 정확한 검사를 제공하는 것을 추천한다.

Data 속성을 활용

파슬리는 일반적인 자바스크립트 플러그인들 같이 초기화(init)를 위해 자바스크립트 구문을 작성하지 않아도 직접 DOM에 모든 것을 설정할 수 있도록 특별한 DOM API를 사용한다(data-* 를 지원함). 파슬리의 기본 DOM API는 data-parsley-이며, 이 문구 뒤로 붙는 다양한 정해진 속성과 값, 혹은 직접 만든 속성과 값으로 플러그인을 설정한다.

즉, 설정에서 foo 속성을 참조하기위해서 DOM을 통해 data-parsley-foo="value" 와 같이 설정할 수 있다는 것을 의미한다.

동적인 폼 유효성 검증

파슬리는 좀 똑똑해서, 자동으로 폼의 수정사항을 감지하여 그에 따라 유효성을 검증한다. 필드를 간단히 추가, 제거, 수정하면 파슬리는 그것을 검증할 것이다!

실제 사용해보면, 파슬리가 자동적으로 감지하는 것들은 필드에 작성해둔 속성들을 기반으로 작동한다는 것을 알게 됩니다. 가령, input 필드에 required를 추가하면 이는 필수로 입력해야 한다는 것을 감지하고, 다른 어떤 조치를 하지 않아도 알아서 상황에 맞는 유효성 검증을 하게 됩니다. 이는 파슬리에 내장된 검증 목록들과 연관되어 있으며, type="email, type="url", minlength, maxlength, pattern 등의 이미 작성되어 있는 검증 목록들과 연동해서 자동으로 검증하게 되는 것입니다.

내장된 검증기들

위에서 언급했듯이 미리 작성되어 포함되어 있는 유용한 검증 목록들이 12개 제공되며, Parsley 다운로드에서 Ajax 검증 및 기타 검증 목록들을 추가로 배포하고 있다.

UX가 뛰어남

파슬리는 UI와 UX를 통솔하는 강력한 매커니즘을 가지고 있다. 이를 활용할 개발자들의 요구를 수용할 수 있도록 거의 모든 파슬리의 기본 동작을 재정의할 수 있다.

가장 맘에 드는 부분중에 하나입니다. 기본적으로 검증되는 필드의 형제요소로 <ul> 요소가 추가되어 오류메세지를 보여주게 되며, 이때 유효성 검증 성공, 실패를 반영할 클래스 또한 필드에 추가됩니다. 이것들은 기본값일 뿐이며 원하는 위치에 오류메세지를 추가할 수 있고, 성공, 실패 클래스도 원하는 위치에 추가할 수 있습니다. 디자인을 고려할 수 있게 만들어졌더군요.

무료이며 IE7까지 호환

Parsley 예제보기

직접 작동하는 예제들을 살펴보도록 하자.

다양한 input 필드에 대한 간단한 사용예제

파슬리가 지원하는 결합(bind), 설정 및 유효성 검사를 요소에 적용하는 폼 예제이다.

간단 폼 예제 보기

이벤트를 사용하여 복잡한 유효성 검증을 만드는 예제

때때로, 기본적으로 지원되는 유효성 검증만으로는 충분하지 않을때가 있다. 파슬리 이벤트를 활용할 수 있는 믿을 수 있는 방법을 제시한다.

이벤트를 사용

유효성 검증을 순차적으로 진행하는 예제

때때로, 길고 까다로운 폼양식을 분할해야 할 경우가 생긴다. 각각의 분할된 폼을 group을 이용해서 손쉽게 검증하는 방법을 제시한다.

단계별 폼 유효성 검증

자신의 검증기를 만드는 예제

때때로, 기본 내장된 검증기만으로는 부족하기에 맞춤화를 통해 자신만의 검증기를 만들 필요가 있다. 맞춤화 검증기를 만드는 법을 제시한다.

맞춤화 검증기 만들기

Parsley 설치

앞서 언급했듯이 파슬리는 data 속성을 이용한 초기화 및 자바스크립트를 이용한 초기화가 가능하다.

data 속성을 이용한 설치(기본값)

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<form data-parsley-validate>
...
</form>

1. jQuery 1.8 이상을 삽입한다.
2. parsley.js 혹은 parsley.min.js를 jQuery 이후에 삽입한다.
3. 마지막으로, 검증할 <form> 에 data-parsley-validate 를 추가한다.

파슬리는 유효성 검사를 할때 DOM에 많은 클래스와 요소를 추가한다. 자신에 맞게 스타일을 수정하여 사용하면 되지만, 부트스트랩과 파슬리를 함께 사용하는 프로젝트의 예제로 사용되는 기본적인 Parsley css file도 준비되어 있다.

자바스크립트로 설치

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<form id="form">
...
</form>

<script type="text/javascript">
  $('#form').parsley();
</script>

data 속성을 이용한 설치방법과 마찬가지로 설치하되, <form>에 data 속성을 추가하지 말고 $('#form').parsley(options); 처럼 jQuery를 이용해 초기화하거나, new Parsley('#form', options); 처럼 수동적으로 폼을 파슬리에 결합시킨다.

번역하면서 bind 라는 용어가 자주 등장했는데, 막당한 단어를 찾지 못해 그냥 결합이라는 단어를 사용했다.

Do not add data-parsley-validate to your forms Please be aware that Parsley looks at all data-parsley-validate occurrences in DOM on document load and automatically binds them if valid. Once a form or field instance is bound by Parsley, default instantiation options cannot be easily updated, only the ones defined in the DOM would work. Which means that if this DOM validation attribute is present, doing $('#form').parsley(options); would just return the automatically bound instance, and not the one you would expect with the options you wanted to set.

자바스크립트로 초기화할 경우에는 data-parsley-validate 를 추가하지 말라는 것 같은데... 이해력이 딸려 원문을 남깁니다.

오류메세지 한글화

파슬리는 내장된 검사기에 대한 다양한 오류 메세지를 제공한다. 기본적으로 영문으로 제공하지만, 다른 언어도 사용할 수 있게 각종 언어 스크립트도 함께 제공한다. i18n에서 각종 언어 파일을 찾을 수 있고, 이 중 ko.js가 한글화 언어 파일이다. 이를 복사해서 js 파일로 저장하고 parsley.js 다음에 추가하면 된다. 물론 파슬리 전체버전을 다운로드하면 src/i18n 폴더에 포함되어 있다.

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>
<script src="ko.js"></script>

플러그인

파슬리는 고도로 분리된 모듈화를 위해 노력하고 있다. 이벤트와 상속을 사용하고 다양한 플러그인을 허락한다.

현재 사용가능한 플러그인들 :

• Parsley Remote : ajax 검증과 비동기 검증을 제공한다.
• Parsley Extras : 몇가지 유용한 검증과 여분을 제공한다.

Parsley 구성

파슬리는 여러가지 문서를 제공하고 있는데 default.js를 통해 기본 구성을 살펴볼 수 있다.

define('parsley/defaults', function () {
  var ParsleyDefaults = {

아래의 모든 옵션들은 재정의할 수 있고, DOM에 직접적으로 data-parsley-를 사용해 설정할 수 있다.

예로, inputs는 data-parsley-inputs="input, textarea"를 사용해 설정할 수 있다. data-parsley-stop-on-first-failing-constraint="false"도 한가지 예이다.

General

namespace: 'data-parsley-',
inputs: 'input, textarea, select',
excluded: 'input[type=button], input[type=submit], input[type=reset], input[type=hidden]',
priorityEnabled: true,

• 네임스페이스로 data-parsley-를 사용한다.
• 기본적으로 폼 검증을 지원하는 input 요소들은 input, textarea, select 이다.
• 기본적으로 폼 검증에서 제외되는 input 요소들은 input[type="button"], input[type="submit"], input[type="reset"], input[type="hidden"] 이다.
• 기본적으로 우선 순위가 높은 것의 검증이 실패하면 필드의 검증을 멈추는것 활성화

Field Only

multiple: null,
group: null,

• radio 혹은 checkbox 같은 inputs 요소들의 식별자로 group을 사용한다.
• 식별자(혹은 식별자 배열)은 오직 inputs 그룹의 선택을 검증하는 용도로 사용한다.

UI

uiEnabled: true,
validationThreshold: 3,
focus: 'first',
trigger: false,
errorClass: 'parsley-error',
successClass: 'parsley-success',
classHandler: function (ParsleyField) {},
errorsContainer: function (ParsleyField) {},
errorsWrapper: '<ul class="parsley-errors-list"></ul>',
errorTemplate: '<li></li>'
 };

  return ParsleyDefaults;
});

• 기본값으로 오류 메세지를 활성화하고 있다.
• 검증하기전까지 대기시간(여기서는 기본값 3글자 타이핑이후 검증이 시작된다는 것)
• 폼 검증에서 오류가 발생했을때 포커스될 필드로 first, last, none 의 값을 가질 수 있다.
• $.Event() 로 검증을 발생킨다. 예로, keyup, change등
• 필드에서 오류가 발생되었을때 추가하게될 클래스명이다.
• 필드에서 검증이 성공되었을때 추가하게될 클래스명이다.
• 위의 클래스들을 받게될 요소를 지정하는 것으로 $element를 반환한다.
• 오류메세지를 포함하는 컨테이너를 지정하는 것으로 $element를 반환한다.
• 오류 목록을 받게될 ul 요소
• 오류 메세지를 받게될 li 요소

다음 페이지에서 Parsley 사용법에 대해서 다룹니다.