HACOSA jQuery STUDY#11. HTML 폼의 기능 강화하기(플러그인 사용)

폼 유효성 검사하기

• Vaildation 플러그인 사용

‒ 기본 메서드

→ required : 이 메서드로 지정이 되면 반드시 입력되어야 하는 필드로 검사

→ equalTo : 주로 비밀번호 확인 (Confirm Password)에 사용

→ email, url, date, dateISO, dateDE, number, numberDE, digits, creaditcard :

로케일( local)과 관련한 작은 차이를 반영하며 특정 데이터 형식 검사

→ min, max, range : 숫자의 값을 검사

→ minlength, maxlength, rangelength : 문자의 개수 검사

→ accept : file input 사용시 파일 확장자 검사

‒ 사용자 정의 메서드

→특화된 요구 사항에 따라 플러그인을 확장 할 수 있는 방법

$.validator.addMethod(Alias, VaidateFunction, ErrorMessage);

폼 유효성 검사하기

‒ 규칙

→ 클래스와 어트리뷰트를 메타데이터로 사용

→ Rule Option 사용

<input type=“text” name=“userID" class=“required" />

$("#myform").validate({

rules: {

name: {

required : true,

minlength : 2

},

email : “require”

}

});

폼 유효성 검사하기

‒ 오류 메시지

→ 인라인으로 지정 : title 어트리뷰트 이용

→ message 옵션으로 지정

‒ 지역화

→ Validation 플러그인은 현재 41개의 지역화를 제공

→ messages_xx.js 파일을 참조하는 방식으로 사용

<input name=“email” title=“A valid email address is required” />

$("#myform").validate({

message: {

email : {

required : “Required” ,

email : “Not a valid email address”

}

}

});

폼 유효성 검사하기

‒ 오류 요소

→ 기본적으로 오류메세지는 유효성 검사 대상 요소의 id 를 for 어트리뷰트로 가

지는 label 요소로 추가 됨.

→ 다른 요소 형식 지정 방법

→추가된 오류 메시지의 위치 변경 :

• errorPlacement 옵션 사용

$(“#myform”).validate({

errorElement : “em”

});

$(“#myform”).validate({

errorPlacement : function(error, element){

error.appendTo(element.parent(“td”).next(“td”);

}

});

폼 유효성 검사하기

→ 폼 상단에 메시지를 표기 : errorContainer 옵션 사용

→ errorContainer + errorLabelContainer 옵션 사용

: 오류 label 요소가 input 요소 다음에 놓여지는 것이 아니라,

errorContainer 로 지정한 요소에 추가 됨

→ errorContainer + wrapper 옵션 사용

$(“#myform”).validate({

errorContainer : “#messageBox1”

});

var contanier = $(“div.container”);

$(“#myform”).validate({

errorContainer : container,

errorLabelContainer : $(“ul”, container),

wrapper : “li”

});

폼 유효성 검사하기

‒ 전송 처리하기

→ 기본적으로 유효성 검사를 통과할 경우 일반적인 폼 전송과 마찬가지로 동작

→ submitHandler 옵션으로 수동으로 submit 할 수도 있다.

‒ 기타 자세한 정보는

http://docs.jquery.com/Plugins/Validation 에서 확인 가능

$(“#myform”).validate({

submitHandler : function(form){

if( confirm(“정말 전송 하겠수?”))

$(form).submit();

}

});

마스크 기능을 제공하는 input 필드 만들기

• Masked Input Plugin

‒ http://digitalbush.com/projects/masked-input-plugin/#demo

‒ 각 변수 문자에 대해 “ _ “ 를 보여줌

‒ 정의된 마스크

A : [a-z],[A-Z]

9 : [0-9]

* : [a-z],[A-Z],[0-9]

? : 이후 모든 문자는 선택적임을 의미

‒ 사용자 정의마스크

$(“#phone”).mask(“(999) 999-9999”)

(_ _ _) _ _ _ - _ _ _ _

$.mask.definitions['~']='[+-]';

$("#eyescript").mask("~9.99 ~9.99 999");

텍스트 필드 자동 완성하기

• jQuery Ui의 autocomplete 위젯

‒ 데이터를 자바스크립트 배열을 이용하여 출력

‒ 데이터를 서버측의 자원으로 부터 가져와서 출력

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',

'September', 'October', 'November', 'December'];

$(“#month”).autoComplete({

source : months

});

$(“#month”).autoComplete({

source : “addresses.php”

});

값의 범위 선택하기

• jQuery UI의 Slide 위젯

‒ 범위 슬라이더를 사용하여 두 개 텍스트 input 요소 값을 변경 할 수 있다

var slider = $("#slider-range").slider({

range: true,

min: 0,

max: 500,

values: [75, 300],

slide: function(event, ui) {

$("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);

}

});

$("#amount").val('$' + slider.slider("values", 0) + ' - $' + slider.slider("values", 1));

$(“#slider”).slide();

범위가 제한 된 값 입력하기

• jQuery UI의 Spinner 위젯 사용

‒ Spinner 플러그인을 사용하면 값을 증가/감소 시키기 위한 버튼을 추가 할

수 있으며, 위/아래 버튼을 클릭하거나 input 요소에 포커스를 준 다음 커서

키를 위/아래로 눌러서 값을 변경 할 수 있다.

‒ 기본 옵션• min : 하한 값 설정

• max : 상한 값 설정

• stepping : 증가값 설정

var currency = $("#currency").change(function() {$("#amount").spinner("option", "currency", $(this).val()).blur();

});$("#amount").spinner({

currency: currency.val(),min: 5,max: 1000,step: 5

});

$(“#value”).spinner();

백그라운드에서 파일 업로드하기

• jQuery의 Form 플러그인

‒ Ajax 기반의 백그라운드 업로드

<form id=“uploadform”><input type=“file” id=“fileupload” name=“fileupload” /><input type=“submit” value=“Upload!” />

</form>

$(“#uploadform”).ajaxForm({success: function(){

alert(“Upload completed!”);}

});

텍스트 입력 길이를 제한하기

• Maxlength 플러그인

‒ textarea 요소 앞이나 뒤에 “Characters left : x” 라는 표시기를 추가

<form action="/comment"><p>Characters left: <span class="charsLeft">10</span></p><textarea name="commentbody" maxlength="10"></textarea>

</form>

$(“textarea”).maxlength();

Input 필드 위에 라벨 나타내기

• Watermark 플러그인

‒ HTML5의 placeholder 기능과 비슷

$(“#search”).watermark(“Search”);

콘텐트에 따라 input 요소 크게 만들기

• Elastic 플러그인

‒ 처음에는 기본적인 높이로 시작하지만, 사용자가 텍스트를 어느 정도 입력

하면 높이가 자동으로 증가

<textarea id=“commentbody”></text>$(“#commentbody”).elastic();

날짜 선택하기

• jQuery UI의 Datepicker 플러그인

‒ from ~ to 형식의 날짜 선택 만들기

<label for="startAt">Start at:</label><input type="text" name="startAt" id="startAt" />

$(“#startAt”).datepicker();

<label for="from">From</label><input type="text" id="from" name="from" class="hasDatepicker"><label for="to">to</label><input type="text" id="to" name="to" class="hasDatepicker">

var dates = $('#from, #to').datepicker({defaultDate: "+1w", // 기본 날짜 설정changeMonth: true, // 월 변경 가능 여부 설정numberOfMonths: 3, // 한번에 출력할 월 갯수onSelect: function(selectedDate) { // 날짜선택 시 발생되는 이벤트

var option = this.id == "from" ? "minDate" : "maxDate";dates.not(this).datepicker("option", option, new Date(selectedDate));

}});

날짜 선택하기

‒ showOn 옵션

→ focus (default) : Input 요소가 focus를 받을 때 달력을 보여줌

→ button : 버튼을 클릭해야 달력을 보여줌

→ both : focus, button 방식 모두 허용

‒ 지역화

→ ui.datepicker-xx.js 파일로 41개의 로케일 지원

$(“#datepicker”).datepicker({showOn : ‘button’,buttonImage : ‘image/calendar.gif’,buttonImageOnly : true

});

END