폼 스크립트
자바스크립트로 폼관련 필드의 유효성 검사 및 표준 폼 컨트롤러의 기본 동작을 확장하기 시작했습니다.
폼 기본
<form>요소는 아래와 같은 기본 프로퍼티와 메서드를 가집니다.
- acceptCharset : 서버가 처리할 수 있는 문자셋, HTML의 accept-charset속성과 같다.
- action : 요청을 보낼 URL
- elements : 폼에 있는 컨트롤 전체의 HTML Collection
- enctype : 요청의 인코딩 타입.
- length : 폼에 컨트롤 개수
- method : HTTP 요청 타입
- name : 폼의 이름. HTML의 name속성
- rest() : 폼 필드를 모두 기본값으로 리셋
- submit() : 폼을 전송
- target : 요청을 보내고 응답을 받을 창 이름.
접근은 일반적으로 id를 통한 접근이 있으며, document.forms컬렉션을 통해서도 접근 가능한데 name을 이용할수도 있습니다.
var form = document.getElementById("form1"); //id가 form1인 폼
var firstForm = document.forms[0]; //페이지의 첫번 째 폼
var myform = document.forms["form2"]; //name="form2" 인 속성을 가진 폼
폼 전송
폼안에 전송버튼이나 이미지버튼을 누르면 폼이 전송됩니다.
<input type="submit" value="Submit Form"> //범용 전용
<button type="submit">Submit Form</button> //커스텀 전송버튼
<input type="image" src="graphic.gif"> //이미지 버튼
//자바스크립트에서의 폼 전송
form.submit();
이들 버튼 타입이 폼에 들어있을 경우 폼 컨트롤에 포커스가 있는 상태에서 키를 눌러도 폼이 전송됩니다.
전송 버튼이 없는 폼은 엔터키를 눌러도 전송이 되지 않으며, 이를 막고 싶다면 submit이벤트핸들러를 추가한 후 preventDefault(event) 를 사용할 수 있습니다.
if (element.addEventListener) {
element.addEventListener("submit", function(evt) {
evt.preventDefault();
}, true);
}
else {
element.attachEvent('onsubmit', function(evt){
evt.preventDefault();
});
}
폼 리셋
폼을 모두 리셋합니다.
웹 폼 디자인에서는 일반적으로 잘 쓰이지 않습니다.
<input type="reset" value="Reset Form"> //범용 전용
<button type="reset">Reset Form</button> //커스텀 리셋버튼
//자바스크립트에서의 폼 리셋
form.reset();
이벤트가 실행안되게 막고 싶다면 폼 전송때 처럼 preventDefault();을 이용하면 됩니다.
폼 필드
폼 내부의 input, textarea, button, select, fieldset이 해당 elements컬렉션에 속합니다.
인덱스와 name 두가지로 접근 가능합니다. name의 경우 중복되는 name에 전체 요소를 가져옵니다.
예제를 봅시다.
var form = document.getElementById("form1");
// 첫 번째 필드
var field1 = form.elemetns[0];
//textbox1 필드
var field2 = form.elements["textbox1"];
//필드 개수
var fieldcount = form.elements.lenth;
폼필드는 위와같이 접근 합니다.
사용되는 공통 프로퍼티와 메서드에 대해서 알아봅시다.
- disabled : 필드가 비활성 상태인지 확인하는 boolean 값
- form : 필드가 속하는 폼을 가리키는 포인터, 읽기전용
- name : 필드 이름
- readOnly : 읽기전용인지 확인하는 boolean 값
- tabIndex : 필드의 탭 순서
- type : checkbox, radio같은 필드 타입
- value : 서버에 전송할 필드 값
- focus() : 포커스를 해당 폼 필드로 옮김
- blur() : 포커스를 해당 필드에서 제거합니다. 포커스가 이동되는게 아니라 단순히 제거 됩니다.
form을 제외한 프로퍼티는 동적으로 설정 가능합니다.
var form = document.getElementById("form1");
var field = form.elements[0];
field.value = "Another Value"; value값 변경
field.focus(); //포커스 부여
field.disabled = true; //필드 비활성화
폼필드는 이외에도 공통 이벤트가 존재합니다.
모든 폼필드에 해당하는 내용이며, 마우스, 키보드, 변경, HTML이벤트 외에 다음 이벤트를 지원합니다.
- blur : 필드가 포커스 잃을 때 발생하는 이벤트
- change : 필드가 포커스를 잃거나 값이 바뀔 때 혹은 선택된 옵션이 바뀌었을 때 발생
- focus : 필드가 포커스를 받을 때 발생하는 이벤트
텍스트 박스 스크립트
input요소와 textarea요소에 대한 관련 기능을 알아봅시다.
- select() : 포커스를 해당 텍스트 박스로 옮김.
var textbox = document.forms[0].elements["textbox1"];
textbox.select();
위와같이 텍스트 박스로 포커스를 옮기면 전체 텍스트를 선택합니다.
텍스트를 직접 지우고 입력하는 수고를 덜어주기 위한 기본동작입니다.
select 이벤트
select()메서드에 호응하는 select 이벤트도 있습니다.
텍스트 선택을 마치면 발생하는 이벤트입니다.
기타 프로퍼티 및 메서드
- selectionStart : 텍스트의 경계를 나타냄
- selectionEnd : 텍스트의 경계를 나타냄
- substring() : 문자열 오프셋을 매개변수로 받아 선택된 텍스트 반환
- setSelectionRange() : 텍스트 일부만 선택합니다. 선택할 텍스트의 첫번째, 마지막 문자 인덱스를 받습니다. substring()과 마찬가지입니다.
입력 필터링
텍스트 박스는 특정 타입이나 형식에 맞는 데이터를 받으려는 일이 많습니다.
이런 형식의 유효성검사는 기본적으로 제공되지 않으므로 어떻게 사용하는지 알아봅시다.
문자거부
문자를 입력할때 keypress이벤트가 발생하는데 이때 특정 문자를 차단 할 수 있습니다.
keypress이벤트 내부에서 해당 이벤트에 조합키를 차단하는 예제를 확인해봅시다.
if(charCode > 9 && !event.ctrlKey){
//ctrlKey와 조합된 입력이 아닐때 실행 코드
}
이런 테크닉을 이해했다면 원하는데로 특정 문자를 허용하거나 차단하도록 할 수 있습니다.
클립보드 활용
HTML5에 추가된 클립보드 관련 이벤트는 아래 여섯가지 입니다.
- beforecopy : 복사하기 직전 발생
- copy : 복사할 때 발생
- beforecut : 잘라내기 직전에 발생
- cut : 잘라낼 때 발생
- beforepaste : 붙여넣기 직전에 발생
- paste : 붙여넣을 때 발생
브라우저 별로 객체의 동작이 약간 다르기 때문에 주의합시다.
해당 이벤트들에는 clipboardData라는 객체를 가지고 있습니다.
이 객체는 getData(), setData(), clearData() 세가지 메서드를 가지고 있습니다.
setData()의 경우에는 보통 IE에서만 동작합니다.
HTML5 유효성 검사 API
HTML5에서는 폼을 서버 전송 전 브라우저에서 데이터 유효검사하는 기능이 도입되었습니다.
자바스크립트를 불러오지 못해도 이 기능을 통해 기본적인 검사가 가능합니다.
//필수값 입력 검사
<input type="text" name="username" required>
//이메일 형식 확인
<input type="email" name="email">
//url형식 확인
<input type="url" name="homepage">
//0부터 100까지 5의 배수만 받는 숫자형 타입, 스핀박스 컨트롤
<input type="number" min="0" max="100" step="5" name="count">
//패턴
<input type="text" pattern="\d+" name="count2">
위와같이 주어진 필드가 유효한지 체크할 때는 checkValidity() 메서드를 이용합니다.
//특정폼 유효성 검사
if(document.forms[0].elements[0].checkValidity()){
//유효한 필드. 코드진행
}else {
//유효하지 않은 필드
}
//전체 폼 유효성 체크
if(document.forms[0].checkValidity()){
//유효한 필드. 코드진행
}else {
//유효하지 않은 필드
}
자세한 유효성 체크결과를 판단할 수 있는 validity프로퍼티도 있습니다.
- customErrer : setCustomValidity()설정 여부
- patternMismatch : 값이 pattern속성에 일치 X
- rangeOverflow : 값이 max 값보다 크면 true
- rangeUnderflow : 값이 min 값보다 작으면 true
- stepMisMatch : min, max 사이에서 주어진 step속성에 정확히 맞지 않으면 true
- tooLong : maxlength프로퍼티에 지정된 글자 수를 초과
- typeMismatch : email, url형식이 맞지않을때
- valid: 다른프로퍼티가 모두 false일때 true
- valueMissing : 필수필드지만 값이 없을 때
아래와 같이 사용하여 자세한 정보를 얻을 수 있습니다.
if (input.validity && !input.validity.valid){
if(input.validity.valueMissing){
//코드
}else if (input.validity.typeMismatch){
//코드
}else {
//코드
}
}
아래와 같이 지정해주면 유효성 검사를 생략합니다.
<form method="post" action="signup.php" novalidate>
</form>
or
document.forms[0].noValidata = true;
Select 요소 스크립트
셀렉트박스는 <select>와 <option>으로 생성합니다.
아래와 같은 특징이 있습니다.
- 선택된 옵션이 없으면 값은 빈 문자열
- 선택된 옵션이 있고 해당 옵션에 value 속성이 있다면 선택한 옵션의 value속성이 SELECT박스의 값
- option에 value가 없을 경우 해당 option의 텍스트가 값으로 반환됩니다.
- 여러 옵션이 선택되었으면 select값은 첫번째 옵션을 따릅니다.
//옵션 선택
var selectedOption = selectbox.options[selectbox.selectedIndex];
var selectedIndex = selectbox.selectedIndex;
var selectedOption2 = selectbox.options[selectedIndex];
폼 직렬화
폼직렬화란 폼의 값을 key=value&key=value 와같은 형식의 string으로 만들어 줍니다.
serialize()함수를 이용하여 쉽게 변환할 수 있습니다.
serialize()는 문자열을 쿼리스트링 형식으로 반환하지만 다른 직렬화 형식으로 쉽게 바꿀 수 있습니다.
마치며
폼 스크립트에 대해서 알아보았습니다.
실제로 지원하는 메서드에 대한 더 자세한 정보는 아래 주소를 통해서 확인 가능합니다.
브라우저 별로 지원기능이 다르기도 하니 참고하시면 좋을 것 같습니다.
w3schools 바로가기
이상 포스트를 마치겠습니다. 수고하셨습니다