Mootools v1.2용 FormCheck (폼값 체크 툴팁)

폼값 처리하는 플러그인들이 많이 있는데 대부분 div 나 폼값 스타일들에 메시지가 나오는 경우가 대부분이다. 이 플러그인은 그런 형태도 지원하면서 툴팁도 테마로 지원한다. 그리고 클래스 옵션들을 보면 세세한 부분까지 신경쓴 흔적이 많이 있다. 일단 사이트는

http://moo.floor.ch/

아직 버그들이 드문드문 있는거 같다. 포럼가서 보니 문의가 좀 있네...
* UPDATED #1 : validate['submit'] bug

1. 시작하기

글을 쓰는 현재 시점의 버전은 1.4.2 버전이다. 다운로드 받은 뒤 압축을 풀어보면  formcheck.js 와 기타 디렉토리들이 존재한다. lang 은 alert 언어에 대한 스크립트가 있고, theme 에는 css와 툴팁에 대한 테마가 들어 있다. 사용을 위해서는 먼저 페이지 내에서 include를 해야 한다.

<!-- 먼저 Mootools를 include --> <script type="text/javascript" src=".../mootools-1.2.1-core.js"></script> <script type="text/javascript" src=".../mootools-1.2-more.js"></script> <!-- 언어 스크립트 / 여기서 ko.js가 없을텐데 다른 js를 복사해 만들거나 옵션에서 한글로 지정해 줄수도 있다 --> <script type="text/javascript" src=".../formcheck/lang/ko.js"></script> <!-- formcheck.js --> <script type="text/javascript" src=".../formcheck/formcheck.js"></script> <!-- 테마 스타일 --> <link media="screen" type="text/css" href=".../formcheck/theme/classic/formcheck.css" rel="stylesheet" />

domready 이벤트에 선언해준다.

window.addEvent('domready', function() { var myCheck = new FormCheck('form_id', { tipsClass : 'tips_box', display : { scrollToFirst : false }, alerts : { required : 'This field is ablolutely required! Please enter a value' } }) });

먼저 form_id에는 폼태그 id값으로 지정해준다. 폼내 input, textarea, select는 모두 영향을 받게 된다. 그리고 나서 option을 지정해준다. 기본적인 옵션이 있고, display는 시각효과에 대한 설정을 그리고 alerts는 경고 메시지에 대한 설정통해 임의로 정할 수 있다.

선언이 끝나고 나면 폼에서 submit 이벤트가 발생하면 지정된 폼 class의 설정값에 따라 폼 입력값들을 검사하고 메시지를 보여주게 된다. 보통은 input 태그에 submit 버튼을 사용하면 제대로 작동한다. 앵커로 onclick 스크립트를 사용하는 경우는 폼 class 설정에서 어떻게 해야하는지 보여줄것이다.

2. Form Class 설정

기본적인 설정이 끝나고 나면 각 폼들에 class 속성에 validate라는 값을 정해주면 동작하게 된다.

validate['required','length[4, -1]','differs[email]','digit']

다음과 같은 설정을 class에 지정해주면된다. 의미는 required는 필수입력값, length[4,-1]은 4자 이상(최대값은 제한없음), differs[email]는 name=email 폼과 다른값이어야 하며, digit 정수 숫자 이어야 한다는 의미.

실제 사용은

<input type="text" name="number" class="txt validate['requires','legnth[4,-1]','differs[email]','digit']" />

이런식으로 하면된다.
위에서 언급한 anchor 태그로 된 버튼을 submit 버튼으로 활요하기 위해서는 다음과 같이 설정해 주면된다.

<a href="#"  class="validate['submit']"> 확인 </a>

3. 옵션값 / 속성값들

내부 혹은 사이트에 있는 Documentation보다 formcheck.js 내에 주석이 더 자세하게 정리가 잘되어 있다;
일단 validate[]에 쓰이는 type check 속성에는

• required : 입력 필수값
• alpha : 영문알파벳
• alphanum : 영문+숫자
• nodigit : 비정수
• digit : 정수 ( digit[21,65] - 21~65사이 값 )
• number : 숫자 ( 소수값 포함 )
• email : 이메일 주소
• phone : 전화번호
• url : URL 주소값
• confirm : 확인값 ( 보통 가입폼에 비밀번호 확인등에서 많이 쓰는 confirm[password] , name=password 값과 비교해서 동일해야 통과, 그런데 메시지에 바로 "password값과 다릅니다." 이런식으로 name 값이 노출되므로 display option에서 titlesInsteadNames : 1 로 설정하면 <... title = "비밀번호" ..> "비밀번호값과 다릅니다" 이런식으로 나오게 할 수 있음
• differs : 다른값 ( 비교하는 값과 달라야 됨 )
• length : 입력값의 문자열 길이 ( length[4,20] 입력길이가 4~20자 사이 )

이거 외에 callback 함수를 설정해서 사용자가 임의로 검사하도록 만들수도 있다.

validate['required','%customCheck']

function customCheck(el) {
    if (!el.value.test(/^[A-Z]/)) {
        el.errors.push("Username should begin with an uppercase letter"); 
        return false;
    } else {
       return true;
    }
}

기본 옵션 :

• submitByAjax    - you can set this to true if you want to submit your form with ajax. You should use provided events to handle the ajax request (see below). By default it is false.
• ajaxResponseDiv   - id of element to inject ajax response into (can also use onAjaxSuccess). By default it is false.
• ajaxEvalScripts   - use evalScripts in the Request response. Can be true or false, by default it is false.
• onAjaxRequest    - Function to fire when the Request event starts.
• onAjaxSuccess    - Function to fire when the Request receives .  Args: response [the request response] - see Mootools docs for Request.onSuccess.
• onAjaxFailure    - Function to fire if the Request fails.
• tipsClass     - The class to apply to tipboxes' errors. By default it is 'fc-tbx'.
• errorClass     - The class to apply to alertbox (not tips). By default it is 'fc-error'.
• fieldErrorClass   - The class to apply to fields with errors, except for radios. You should also turn on  options.addClassErrorToField. By default it is 'fc-field-error'
• trimValue    - If set to true, strip whitespace (or other characters) from the beginning and end of values. By default it is false.
• validateDisabled  - If set to true, disabled input will be validated too, otherwise not.

 아직 ajax 를 써본적이 없어서 관련 옵션들의 의미를 알아보진 않았다. 나머지느 그냥 default로 써도 무방할듯.

display 옵션 :

• showErrors     - 0 : onSubmit, 1 : onSubmit & onBlur, by default it is 1.
  에러를 보여주는 시점 0인 경우 submit 순간에 검사, 1인경우 폼에서 blur, 포커스가 사라지는 순간까지 검사한다. 간혹 입력폼이 많은 경우에 툴팁이나 메시지가 뒤죽박죽 나올때 0으로 해두면 깔끔해진다.
• titlesInsteadNames  - 0 : When you do a check using differs or confirm, it takes the field name for the alert. If it's set to 1, it will use the title instead of the name.
  위 예에서 보여줌 name 값 대신 title 값을 display 해줌
• errorsLocation    - 1 : tips, 2 : before, 3 : after, by default it is 1.
  1이면 툴팁, 2,3번은 폼 전후로 div 엘리먼트 메시지가 삽입됨.
• indicateErrors    - 0 : none, 1 : one by one, 2 : all, by default it is 1.
  1 이면 하나만, 2이면 한꺼번에 툴팁이 다 생긴다.
• indicateErrorsInit  - 0 : determine if the form must be checked on initialize. Could be usefull to force the user to update fields that don't validate.
• keepFocusOnError   - 0 : normal behaviour, 1 : the current field keep the focus as it remain errors. By default it is 0.
  에러 생긴 폼에 focus 주기.
• checkValueIfEmpty   - 0 : When you leave a field and you have set the showErrors option to 1, the value is tested only if a value has been set. 1 : The value is tested  in any case.  By default it is 1.
• addClassErrorToField  - 0 : no class is added to the field, 1 : the options.fieldErrorClass is added to the field with an error (except for radio). By default it is 0.
• fixPngForIe    - 0 : do nothing, 1 : fix png alpha for IE6 in formcheck.css. By default it is 1.
• replaceTipsEffect   - 0 : No effect on tips replace when we resize the broswer, 1: tween transition on browser resize;
• closeTipsButton   - 0 : the close button of the tipbox is hidden, 1 : the close button of the tipbox is visible. By default it is 1.
  툴팁에  close 버튼 설정
• flashTips     - 0 : normal behaviour, 1 : the tipbox "flash" (disappear and reappear) if errors remain when the form is submitted. By default it is 0.
• tipsPosition    - 'right' : the tips box is placed on the right part of the field, 'left' to place it on the left part. By default it is 'right'.
• tipsOffsetX    - Horizontal position of the tips box (margin-left), , by default it is 100 (px).
• tipsOffsetY    - Vertical position of the tips box (margin-bottom), , by default it is -10 (px).
• listErrorsAtTop   - List all errors at the top of the form, , by default it is false.
• scrollToFirst    - Smooth scroll the page to first error and focus on it, by default it is true.
• fadeDuration    - Transition duration (in ms), by default it is 300.

대략 이 정도 이며 alert 옵션은 lang 폴더에서 참고할것.

 

download 1.4.2 :

formcheck-1.4.2-doc.tar.gz

#update1 : validate['submit'] bug

onSubmit: function(event) { this.reinitialize(); this.validations.each(function(el) { var validation = this.manageError(el,'submit'); if(!validation) this.form.isValid = false; }, this); if (this.form.isValid) { ////----------------------- 수정 : 여기부터 new Event(event).stop(); if (this.options.submitByAjax) { this.submitByAjax(); } else { // update part this.form.submit(); } ////----------------------- 여기까지 } else { new Event(event).stop(); if (this.elementToRemove && this.elementToRemove != this.firstError && this.options.display.indicateErrors == 1) { this.removeError(this.elementToRemove); } this.focusOnError(this.firstError) } } <SPAN id=tx_marker_caret></SPAN>