하코사 jQuery 스터디 Ch.11

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

2. 폼 유효성 검사하기
• 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);

3. 폼 유효성 검사하기
‒ 규칙
→ 클래스와 어트리뷰트를 메타데이터로 사용
<input type=“text” name=“userID" class=“required" />
→ Rule Option 사용
$("#myform").validate({
rules: {
name: {
required : true,
minlength : 2
},
email : “require”
}
});

4. 폼 유효성 검사하기
‒ 오류 메시지
→ 인라인으로 지정 : title 어트리뷰트 이용
<input name=“email” title=“A valid email address is required” />
→ message 옵션으로 지정
$("#myform").validate({
message: {
email : {
required : “Required” ,
email : “Not a valid email address”
}
}
});
‒ 지역화
→ Validation 플러그인은 현재 41개의 지역화를 제공
→ messages_xx.js 파일을 참조하는 방식으로 사용

5. 폼 유효성 검사하기
‒ 오류 요소
→ 기본적으로 오류메세지는 유효성 검사 대상 요소의 id 를 for 어트리뷰트로 가
지는 label 요소로 추가 됨.
→ 다른 요소 형식 지정 방법
$(“#myform”).validate({
errorElement : “em”
});
→추가된 오류 메시지의 위치 변경 :
• errorPlacement 옵션 사용
$(“#myform”).validate({
errorPlacement : function(error, element){
error.appendTo(element.parent(“td”).next(“td”);
}
});

6. 폼 유효성 검사하기
→ 폼 상단에 메시지를 표기 : errorContainer 옵션 사용
$(“#myform”).validate({
errorContainer : “#messageBox1”
});
→ errorContainer + errorLabelContainer 옵션 사용
: 오류 label 요소가 input 요소 다음에 놓여지는 것이 아니라,
errorContainer 로 지정한 요소에 추가 됨
→ errorContainer + wrapper 옵션 사용
var contanier = $(“div.container”);
$(“#myform”).validate({
errorContainer : container,
errorLabelContainer : $(“ul”, container),
wrapper : “li”
});

7. 폼 유효성 검사하기
‒ 전송 처리하기
→ 기본적으로 유효성 검사를 통과할 경우 일반적인 폼 전송과 마찬가지로 동작
→ submitHandler 옵션으로 수동으로 submit 할 수도 있다.
$(“#myform”).validate({
submitHandler : function(form){
if( confirm(“정말 전송 하겠수?”))
$(form).submit();
}
});
‒ 기타 자세한 정보는
http://docs.jquery.com/Plugins/Validation 에서 확인 가능

8. 마스크 기능을 제공하는 input 필드 만들기
• Masked Input Plugin
‒ http://digitalbush.com/projects/masked-input-plugin/#demo
‒ 각 변수 문자에 대해 “ _ “ 를 보여줌
$(“#phone”).mask(“(999) 999-9999”)
(_ _ _) _ _ _ - _ _ _ _
‒ 정의된 마스크
A : [a-z],[A-Z]
9 : [0-9]
* : [a-z],[A-Z],[0-9]
? : 이후 모든 문자는 선택적임을 의미
‒ 사용자 정의마스크
$.mask.definitions['~']='[+-]';
$("#eyescript").mask("~9.99 ~9.99 999");

9. 텍스트 필드 자동 완성하기
• 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”
});

10. 값의 범위 선택하기
• jQuery UI의 Slide 위젯
‒ 범위 슬라이더를 사용하여 두 개 텍스트 input 요소 값을 변경 할 수 있다
$(“#slider”).slide();
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));

11. 범위가 제한 된 값 입력하기
• jQuery UI의 Spinner 위젯 사용
$(“#value”).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
});

12. 백그라운드에서 파일 업로드하기
• 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!”);
}
});

13. 텍스트 입력 길이를 제한하기
• 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();

14. Input 필드 위에 라벨 나타내기
• Watermark 플러그인
‒ HTML5의 placeholder 기능과 비슷
$(“#search”).watermark(“Search”);

15. 콘텐트에 따라 input 요소 크게 만들기
• Elastic 플러그인
‒ 처음에는 기본적인 높이로 시작하지만, 사용자가 텍스트를 어느 정도 입력
하면 높이가 자동으로 증가
<textarea id=“commentbody”></text>
$(“#commentbody”).elastic();

16. 날짜 선택하기
• jQuery UI의 Datepicker 플러그인
<label for="startAt">Start at:</label>
<input type="text" name="startAt" id="startAt" />
$(“#startAt”).datepicker();
‒ from ~ to 형식의 날짜 선택 만들기
<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));
}
});

17. 날짜 선택하기
‒ showOn 옵션
→ focus (default) : Input 요소가 focus를 받을 때 달력을 보여줌
→ button : 버튼을 클릭해야 달력을 보여줌
→ both : focus, button 방식 모두 허용
$(“#datepicker”).datepicker({
showOn : ‘button’,
buttonImage : ‘image/calendar.gif’,
buttonImageOnly : true
});
‒ 지역화
→ ui.datepicker-xx.js 파일로 41개의 로케일 지원

18. END