form api 와 validation - 풀스택개발 EastFlag

html5 폼 유효성 검증하기

Q: 아래 회원가입 폼에서 3가지 입력란의 유효성은 다음과 같다.

아이디: 필수필드, 4자이상
성명: 필수필드, 한글로 시작, 2자이상 5자 이하
이메일: 필수필드, 이메일형식

자바스크립트 코드는 한줄도 사용하지 않고 폼 유효성을 검증하세요.

전송 버튼 클릭시 폼의 유효성을 검증하고 이상이 없으면 화면이 깜박이지 않고 콘솔에 submit이 찍혀야 한다.

<form id="info">
  <fieldset>
    <legend>회원 가입</legend>
    <label for="id">아이디</label>
    <input type="text" name="id" id="id">
    <br>

    <label for="name">성명</label>
    <input type="text" name="name" id="name">
    <br>

    <label for="email">이메일</label>
    <input type="text" name="email" id="email">
    <br>
  </fieldset>
  <input type="submit" value="전송">
  <input type="reset" value="초기화">
</form>

<br>

<br>

<br>

</fieldset>

</form>

  var form = document.getElementById("info");

  form.addEventListener("submit", function(e) {
    console.log('submit');
  });

var form = document.getElementById("info");

form.addEventListener("submit", function(e) {

console.log('submit');

});

A: html5에는 폼유효성을 체크하는 9 속성이 있다. node의 validity라는 json 객체에 9쌍의 validation 속성이 다음과 같이 존재한다.

필수필드: required => valueMissing
타입 체크: type=”email” or url, number, tel, date => typeMismatch
정규표현식 체크: pattern => patternMismatch
최소 문자 길이: minlength => tooShort
최대 문자 길이: maxlength => tooLong
최소 (숫자)값 아래로 오버: min => rangeUnderflow
최대 (숫자)값 위로 오버: max => rangeOverflow
최소 증가 숫자 어김: step => stepMismatch
잘못된 입력: ??? => badInput

<form id="info">
  <fieldset>
    <legend>회원 가입</legend>
    <label for="id">아이디</label>
    <input type="text" name="id" id="id" required="" minlength="4">
    <br>

    <label for="name">성명</label>
    <input type="text" name="name" id="name" required="" pattern="^[가-힣]{2,5}$">
    <br>

    <label for="email">이메일</label>
    <input type="email" name="email" id="email" required="">
    <br>
  </fieldset>
  <input type="submit" value="전송">
  <input type="reset" value="초기화">
</form>

<br>

<br>

<br>

</fieldset>

</form>

Q: 폼의 기본은 html5 유효성을 검증하는것이다. html5 유효성 검증을 하지 않을려면 어떻게 해야 하나?

A: 폼에 novalidate를 추가한다

Q: 입력 필드들의 9가지 validation 속성들을 자바스크립트를 이용하여 프린트하시오.

A: 입력 노드에 validaty 라는 속성으 9가지 속성을 갖고 있는 객체이다. 이 객체를 for ~ in 연산자를 이용해서 출력한다.

	var form = document.getElementById("info");
	var inputs = document.querySelectorAll("input");
	form.addEventListener("submit", function(e) {
		e.preventDefault();
		for (var i = 0; i < inputs.length; i++) {
			var input = inputs[i];
			var vs = input.validity;
			console.log(input.type + ":" + input.id+", 유효성 통과 여부 : "+vs.valid);
			for ( var prop in vs) {
				console.log("--" + prop + " : " + vs[prop]);
			}
		}
	});

var form = document.getElementById("info");

var inputs = document.querySelectorAll("input");

form.addEventListener("submit", function(e) {

e.preventDefault();

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

var vs = input.validity;

console.log(input.type + ":" + input.id+", 유효성 통과 여부 : "+vs.valid);

for ( var prop in vs) {

console.log("--" + prop + " : " + vs[prop]);

}

});

Q: form 에 있는 모든 입력필드들이 유효한지 체크하는 방법은 무엇인가?

A: form 노드에 checkValidaty() 함수를 사용한다.

...
    // form valid 체크
    console.log('form is valid? ', form.checkValidity());

...

// form valid 체크

console.log('form is valid? ', form.checkValidity());

CodePen

See the Pen html5 validation api example by LeeDongKee (@eastflag) on CodePen.default