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