[JS] Contact form 유효성(Validation) 체크하는 여러 가지 방법

Contact form의 유효성을 체크하는 방법에는 여러 가지가 있다. 기본 폼 속성을 이용하는 방법과 CSS로 간단하게 나타내는 방법, 자바스크립트를 사용하는 방법까지 정리해 보자.

1. required

HTML5의 기본 form 속성인 required를 사용하는 방법이다. required로 지정해놓은 input은 필수로 작성해야하며, 브라우저에서 자체적으로 오류 메시지를 띄운다.

<form>
  <label htmlFor="name">
    <div>Name</div>
    <input type="text" id="name" name="user_name" placeholder="성함을 입력해주세요." required />
  </label>
</form>

reqired 외에도 HTML5의 기본 유효성 검사에는 minlength, maxlength, min, max, type, pattern이 있다.

참고 : MDN - Using built-in form validation

2. CSS 가상 클래스 (:invalid, :valid)

form태그, input 태그에 가상 클래스를 사용하여 유효성 검사를 좀더 가시적으로 나타낼 수 있다.

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

단점은 사용자가 입력도 하기 전에 이미 invalid 표시가 되어있다는 것.

참고 : MDN - :invalid

3. JavaScript (invalid event)

JavsScript의 invalid event를 사용하는 방법이다.

const validateForm = () => {
  const $form = document.querySelector('form');
  const $input = $form.querySelectorAll('input');

  if ($form) {
    $input.forEach( input => {
      input.addEventListener('invalid', () => {
        // invalid가 있을 경우 form에 클래스 추가
        $form.classList.add('invalid-form');
      });
    });
  }
}

<form>
  <label htmlFor="name">
    <div>Name</div>
    <input type="text" id="name" name="user_name" placeholder="성함을 입력해주세요." required />
    <div className="validation-note">성함이 입력되지 않았습니다.</div>
  </label>
  <label htmlFor="email">
    <div>Email</div>
    <input type="email" id="email" placeholder="본인의 메일 주소를 정확히 입력해주세요." name="user_email" required />
    <div className="validation-note">메일이 입력되지 않았습니다.</div>
  </label>
  <input type="submit" value="Send" onClick={ validateForm }/>
</form>

(css)

.validation-note {
	visibility: hidden;
}

.invalid-form input:invalid {
	border: 1px solid red;
}

.invalid-form input:invalid + .validation-note {
	visibility: viaible;
}