HTML 양식과 제약 유효성 검사 전문가 가이드

이 글에서는 HTML 폼 필드와 HTML5가 제공하는 유효성 검사 옵션을 살펴보고, CSS와 JavaScript를 사용하여 이를 어떻게 강화할 수 있는지 알아볼 것입니다.

제약 유효성 검사란 무엇인가?

모든 폼 필드에는 목적이 있습니다. 그리고 이러한 목적은 종종 제약에 의해 관리됩니다. — 즉, 각 폼 필드에 어떤 것을 입력해야 하고 어떤 것을 입력하지 말아야 하는지에 대한 규칙입니다. 예를 들어, 이메일 필드는 유효한 이메일 주소를 요구할 수 있고; 비밀번호 필드는 특정 유형의 문자를 요구하거나 필수 문자 수를 정할 수 있으며; 텍스트 필드는 입력할 수 있는 문자 수에 제한을 둘 수 있습니다.

현대의 브라우저는 이러한 제약 조건이 사용자에 의해 준수되고 있는지 확인할 수 있으며, 규칙이 어긋난 경우 사용자에게 경고할 수 있습니다. 이를 제약 유효성 검사라고 합니다.

클라이언트 측 vs 서버 측 유효성 검사

자바스크립트의 초기 몇 년 동안 작성된 대부분의 코드는 클라이언트 측 폼 유효성 검사를 처리했습니다. 심지어 오늘날에도 개발자들은 필드 값을 확인하기 위한 기능을 작성하는 데 상당한 시간을 보냅니다. 현대의 브라우저에서 이것이 여전히 필요할까요? 아마도 아닐 것입니다. 대부분의 경우, 실제로 무엇을 하려는지에 따라 달라집니다.

하지만 먼저, 큰 경고 메시지가 있습니다:

클라이언트 측 유효성 검사는 응용 프로그램이 서버로 데이터를 보내기 전에 일반적인 데이터 입력 오류를 방지할 수 있는 섬세한 부분입니다. 그것은 서버 측 유효성 검사를 대체하기 위한 것이 아닙니다!

항상 서버측에서 데이터를 정리하세요. 모든 요청이 브라우저에서 오지는 않습니다. 브라우저에서 온다 해도, 브라우저가 데이터를 검증했다는 보장은 없습니다. 브라우저의 개발자 도구를 여는 방법을 아는 사람은 당신이 정성껏 만든 HTML과 JavaScript를 우회할 수도 있습니다.

HTML5 입력 필드

HTML은 다음을 제공합니다:

• <textarea> 여러 줄의 텍스트 상자를 위해
• <select> 옵션의 드롭다운 목록을 위해
• <button> 버튼을 위해

하지만 가장 자주 사용할 것은 <input>:

<input type="text" name="username" />

type 속성은 컨트롤 유형을 설정하며, 다양한 옵션이 있습니다:

type	description
button	a button with no default behavior
checkbox	a check/tick box
color	a color picker
date	a date picker for the year, month, and day
datetime-local	a date and time picker
email	an email entry field
file	a file picker
hidden	a hidden field
image	a button which displays the image defined by the src attribute
month	a month and year picker
number	a number entry field
password	a password entry field with obscured text
radio	a radio button
range	a slider control
reset	a button that resets all form inputs to their default values (but avoid using this, as it’s rarely useful)
search	a search entry field
submit	a form submission button
tel	a telephone number entry field
text	a text entry field
time	a time picker with no time zone
url	a URL entry field
week	a week number and year picker

만약 type 속성을 생략하거나 지원하지 않는 옵션이라면 브라우저는 text로 대체합니다. 현대의 브라우저들은 모든 유형을 잘 지원하지만, 구형 브라우저들은 여전히 텍스트 입력 필드를 보여줍니다.

다른 유용한 <input> 속성들은 다음과 같습니다:

attribute	description
accept	file upload type
alt	alternative text for the image types
autocomplete	hint for field auto-completion
autofocus	focus field on page load
capture	media capture input method
checked	checkbox/radio is checked
disabled	disable the control (it won’t be validated or have its value submitted)
form	associate with a form using this ID
formaction	URL for submission on submit and image buttons
inputmode	data type hint
list	ID of <datalist> autocomplete options
max	maximum value
maxlength	maximum string length
min	minimum value
minlength	minimum string length
name	name of control, as submitted to server
pattern	a regular expression pattern, such as [A-Z]+ for one or more uppercase characters
placeholder	placeholder text when the field value is empty
readonly	the field is not editable, but it will still be validated and submitted
required	the field is required
size	the size of the control (often overridden in CSS)
spellcheck	set true or false spell-checking
src	image URL
step	incremental values in numbers and ranges
type	field type (see above)
value	the initial value

HTML 출력 필드

입력 유형뿐만 아니라, HTML5는 읽기 전용 출력도 제공합니다:

• output: 계산 결과나 사용자 동작의 텍스트 결과
• progress: value와 max 속성을 가진 진행률 표시줄
• meter: value, min, max, low, high, optimum 속성에 따라 녹색, 옐로우, 빨간색으로 변경되는 눈금자

입력 레이블

필드에는 관련된 <label>이 있어야 하며, 요소를 감싸는 데 사용할 수 있습니다:

<label>your name <input type="text" name="name" /><label>

또는 필드의 id를 레이블의 for 속성과 연결할 수 있습니다:

<label for="nameid">your name</label>
<input type="text" id="nameid" name="name" />

레이블은 접근성에 중요합니다. 화면 공간을 절약하기 위해 placeholder를 사용하는 양식을 만난 적이 있을 것입니다:

<input type="text" name="name" value="" placeholder="your name" />

자리 표시자 텍스트는 사용자가 무언가를 입력하면 사라집니다 – 심지어 공백 하나만으로도요. 필드가 원하는 것을 사용자가 기억하도록 강요하는 것보다 레이블을 표시하는 것이 낫습니다!

입력 동작

필드 유형과 제약 속성은 브라우저의 입력 동작을 변경합니다. 예를 들어, number 입력은 모바일 기기에서 숫자 키보드를 표시합니다. 필드에 스피너가 표시되고 키보드 위/아래 커서 누름 작업은 값을 증가 및 감소시킵니다.

대부분의 필드 유형은 명백하지만, 예외도 있습니다. 예를 들어, 신용 카드는 숫자로 구성되지만, 증가/감소 스피너는 무용지물이며 16자리 숫자를 입력할 때 위나 아래를 누르기 너무 쉽습니다. 표준 text 유형을 사용하는 것이 더 좋지만, inputmode 속성을 numeric로 설정하면, 적절한 키보드가 표시됩니다. autocomplete="cc-number"를 설정하면 미리 구성되거나 이전에 입력된 카드 번호를 제议할 수 있습니다.

적절한 필드 type과 autocorrect를 사용하면 JavaScript로는 얻기 어려운 혜택을 얻을 수 있습니다. 예를 들어, 일부 모바일 브라우저는:

• 카메라를 사용하여 카드를 스캔하여 신용 카드 세부 정보를 가져올 수 있습니다.
• SMS로 전송된 일회용 코드를 가져올 수 있습니다.

자동 유효성 검사

브라우저는 type, min, max, step, minlength, maxlength, pattern, required 속성에 정의된 제약 조건을 준수하는 입력 값을 보장합니다. 예를 들어:

<input type="number" min="1" max="100" required />

빈 값을 제출하려고 시도하면 양식 제출이 방지되고 Chrome에서 다음과 같은 메시지가 표시됩니다:

스피너는 1에서 100 범위 밖의 값을 허용하지 않습니다. 숫자가 아닌 문자열을 입력하면 유사한 유효성 검사 메시지가 표시됩니다. 모두 JavaScript 한 줄도 사용하지 않고.

브라우저 유효성 검사를 중지할 수 있습니다:

• novalidate 속성을 <form> 요소에 추가
• formnovalidate 속성을 제출 버튼이나 이미지에 추가

사용자 정의 JavaScript 입력 생성

새로운 JavaScript 기반 날짜 입력 구성 요소를 작성 중이라면, 키보드에서 손을 떼고 물러나세요!

사용자 정의 입력 컨트롤을 작성하는 것은 어렵습니다. 마우스, 키보드, 터치, 음성, 접근성, 화면 크기, JavaScript가 실패할 때 어떻게 되는지 등을 고려해야 합니다. 또한 다른 사용자 경험을 만들고 있습니다. 아마도 당신의 컨트롤은 데스크탑, iOS, Android에서 표준 날짜 선택기보다 우수할지 모르지만, 익숙하지 않은 UI는 일부 사용자를 혼란스럽게 할 것입니다.

개발자들이 JavaScript 기반 입력을 만들기로 선택하는 세 가지 주된 이유가 있습니다.

1. 표준 컨트롤은 스타일링이 어렵습니다

CSS 스타일링은 제한적이며 종종 ::before 및 ::after 가상 요소를 사용하여 입력을 라벨과 겹치는 해킹이 필요합니다. 상황은 개선되고 있지만, 기능보다 형태를 우선시하는 어떤 디자인에 대해서도 의문을 제기하십시오.

2. 구형 브라우저에서 현대적인 <input> 유형이 지원되지 않습니다

본질적으로, 당신은 인터넷 익스플로러용으로 코딩하고 있습니다. IE 사용자는 날짜 선택기를 얻지 못하지만 YYYY-MM-DD 형식으로 날짜를 입력할 수 있습니다. 고객이 고집하면 IE에서만 폴리필을 로드하세요. 현대식 브라우저를 부담시킬 필요는 없습니다.

3. 당신은 전례 없는 새로운 입력 유형을 요구합니다

이러한 상황은 드물지만 항상 적절한 HTML5 필드로 시작하세요. 이들은 빠르고, 스크립트가 로드되기 전에도 작동합니다. 필요에 따라 필드를 점진적으로 개선할 수 있습니다. 예를 들어, JavaScript의 살짝 뿌리기로 달력 이벤트의 종료 날짜가 시작 날짜 이후인지 확인할 수 있습니다.

요약하자면: HTML 컨트롤을 재발명하지 마세요!

CSS 검증 스타일링

다음 의사 클래스를 입력 필드에 적용하여 현재 상태에 따라 스타일을 지정할 수 있습니다:

selector	description
:focus	the field with focus
:focus-within	an element contains a field with focus (yes, it’s a parent selector!)
:focus-visible	an element has focus owing to keyboard navigation, so a focus ring or more evident styling is necessary
:required	a field with a required attribute
:optional	a field without a required attribute
:valid	a field that has passed validation
:invalid	a field that has not passed validation
:user-valid	a field that has passed validation after the user has interacted with it (Firefox only)
:user-invalid	a field that hasn’t passed validation after the user has interacted with it (Firefox only)
:in-range	the value is within range on a number or range input
:out-of-range	the value is out of range on a number or range input
:disabled	a field with a disabled attribute
:enabled	a field without a disabled attribute
:read-only	a field with a read-only attribute
:read-write:	a field without a read-only attribute
:checked	a checked checkbox or radio button
:indeterminate	an indeterminate checkbox or radio state, such as when all radio buttons are unchecked
:default	the default submit button or image

입력의 placeholder 텍스트를 ::placeholder 의사 요소로 스타일링할 수 있습니다:

/* 이메일 필드에 파란색 플레이스홀더 */
input[type="email"]::placeholder {
  color: blue;
}

위의 선택기들은 동일한 구체성을 가지고 있으므로 순서가 중요할 수 있습니다. 다음 예를 고려하십시오:

input:invalid { color: red; }
input:enabled { color: black; }

무효한 입력은 빨간색 텍스트를 가지지만, 이는 disabled 속성을 가진 입력에만 적용됩니다 — 따라서 모든 활성화된 입력은 검은색입니다.

브라우저는 페이지 로드 시 검증 스타일을 적용합니다. 예를 들어 다음 코드에서 모든 무효한 필드에 빨간색 테두리가 지정됩니다:

:invalid {
  border-color: #900;
}

사용자는 양식과 상호 작용하기 전에 두려운 빨간 상자 세트에 직면합니다. 첫 번째 제출 후 또는 값이 변경될 때 유효성 검사 오류를 표시하면 더 나은 경험을 제공할 수 있습니다. 그것이 JavaScript가 참여하는 곳입니다…

JavaScript와 제약 유효성 검사 API

제약 유효성 검사 API는 표준 HTML 필드 검사를 향상시킬 수 있는 양식 사용자 정의 옵션을 제공합니다. 다음을 수행할 수 있습니다.

• 사용자가 필드나 양식을 제출할 때까지 유효성 검사를 중지합니다.
• 사용자 지정 스타일로 오류 메시지 표시
• HTML만으로는 불가능한 사용자 정의 유효성 검사를 제공합니다. 이는 이메일 주소나 전화번호를 입력할 때, “새로운” 및 “확인” 비밀번호 필드가 동일한 값을 갖는지 확인하거나 하나의 날짜가 다른 날짜 이후인지 확인해야 할 때 종종 필요합니다.

양식 유효성 검사

API를 사용하기 전에 코드는 기본 유효성 검사 및 오류 메시지를 비활성화하기 위해 양식의 noValidate 속성을 true로 설정하여 기본 유효성 검사 및 오류 메시지를 비활성화해야 합니다(이는 novalidate 속성을 추가하는 것과 같습니다).

const myform = document.getElementById('myform');
myform.noValidate = true;

그런 다음 양식이 제출될 때와 같은 이벤트 핸들러를 추가할 수 있습니다.

myform.addEventListener('submit', validateForm);

핸들러는 checkValidity() 또는 reportValidity() 메서드를 사용하여 전체 양식의 유효성을 확인할 수 있으며, 이 메서드는 모든 양식 입력이 유효할 때 true를 반환합니다. (차이점은 checkValidity()가 유효성 검사에 대한 제약 조건을 준수하는 입력 여부를 확인한다는 것입니다.)

모질라 문서설명:

각 유효하지 않은 필드에서 invalid 이벤트가 발생합니다. 이 이벤트는 버블링되지 않으므로, 이를 사용하는 각 컨트롤에 핸들러를 추가해야 합니다.

// 제출 시 폼 유효성 검사
function validateForm(e) {

  const form = e.target;

  if (form.checkValidity()) {

    // 폼이 유효함 - 추가 검사 수행

  }
  else {

    // 폼이 유효하지 않음 - 제출 취소
    e.preventDefault();

  }

};

A valid form could now incur further validation checks. Similarly, an invalid form could have invalid fields highlighted.

필드 유효성 검사

개별 필드는 다음과 같은 제약 유효성 검사 속성을 가지고 있습니다:

• willValidate: 요소가 제약 유효성 검사의 대상이면 true를 반환합니다.

• validationMessage: 유효성 검사 메시지. 필드가 유효하면 이 값은 빈 문자열입니다.

• valitity: 유효성 상태를 나타내는 ValidityState 객체. 이 객체의 valid 속성은 필드가 유효할 때 true로 설정됩니다. false인 경우, 다음 속성 중 하나 이상이 true로 설정됩니다:

  ValidityState	설명
  .badInput	브라우저가 입력을 이해할 수 없음
  .customError	사용자 지정 유효성 메시지가 설정됨
  .patternMismatch	값이 pattern 속성과 일치하지 않음
  .rangeOverflow	값이 max 속성보다 큼
  .rangeUnderflow	값이 min 속성보다 작음
  .stepMismatch	값이 step 속성 규칙에 맞지 않음
  .tooLong	문자열 길이가 maxlength 속성보다 큼
  .tooShort	문자열 길이가 minlength 속성보다 작음
  .typeMismatch	값이 유효한 이메일 또는 URL이 아님
  .valueMissing	required 값이 비어있음

개별 필드들은 다음과 같은 제약 검증 메서드를 가지고 있습니다:

• setCustomValidity(message): 유효하지 않은 필드에 대한 오류 메시지를 설정합니다. 필드가 유효할 때는 빈 문자열을 전달해야 하며, 그렇지 않으면 필드는 영원히 유효하지 않은 상태로 남아있습니다.
• checkValidity(): 입력이 유효할 때 true를 반환합니다. valitity.valid 속성도 같은 작업을 수행하지만, checkValidity()는 필드에 invalid 이벤트를 발생시키므로 유용할 수 있습니다.

다음과 같은 validateForm() 핸들러 함수는 모든 필드를 순회하고 필요한 경우 부모 요소에 invalid 클래스를 적용할 수 있습니다:

function validateForm(e) {
  const form = e.target;
  if (form.checkValidity()) {
    // 폼이 유효합니다 - 추가 검사 수행
  }
  else {
    // 폼이 유효하지 않습니다 - 제출 취소
    e.preventDefault();
    // 유효하지 않은 클래스 적용
    Array.from(form.elements).forEach(i => {
      if (i.checkValidity()) {
        // 필드가 유효합니다 - 클래스 제거
        i.parentElement.classList.remove('invalid');
      }
      else {
        // 필드가 유효하지 않습니다 - 클래스 추가
        i.parentElement.classList.add('invalid');
      }
    });
  }
};

HTML에서 이메일 필드를 정의한 것으로 가정합니다:

<div>
  <label for="email">email</label>
  <input type="email" id="email" name="email" required />
  <p class="help">Please enter a valid email address</p>
</div>

스크립트는 이메일이 지정되지 않았거나 유효하지 않은 경우 <div>에 invalid 클래스를 적용합니다. CSS는 양식이 제출될 때 유효성 검사 메시지를 표시하거나 숨길 수 있습니다:

.help { display: none; }
.invalid .help { display: block; }
.invalid label, .invalid input, .invalid .help {
  color: red;
  border-color: red;
}

사용자 정의 양식 유효성 검사기 생성

다음 데모는 사용자 이름과 이메일 주소, 전화번호 또는 둘 다 필요한 연락처 양식의 예를 보여줍니다.

이것은 FormValidate라는 일반적인 양식 유효성 검사 클래스를 사용하여 구현되었습니다. 양식 요소는 개체를 인스턴스화할 때 전달됩니다. 선택적으로 두 번째 매개변수를 설정할 수 있습니다:

• true 사용자가 상호 작용할 때마다 각 필드를 검증하려면
• false (기본값) 첫 번째 제출 후 모든 필드를 검증 (필드 수준 검증은 그 후에 발생)

// 연락처 양식 유효성 검사
const contactForm = new FormValidate(document.getElementById('contact'), false);

.addCustom(field, func) 메서드는 사용자 정의 유효성 검사 함수를 정의합니다. 다음 코드는 email 또는 tel 필드가 유효한지 확인합니다 (둘 다 required 속성이 없음).

// 사용자 정의 유효성 검사 - 이메일 및/또는 전화
const
  email = document.getElementById('email'),
  tel = document.getElementById('tel');

contactForm.addCustom(email, f => f.value || tel.value);
contactForm.addCustom(tel, f => f.value || email.value);

A FormValidate object monitors both of the following:

• focusout 이벤트는 개별 필드를 확인합니다.
• 양식 submit 이벤트는 모든 필드를 확인합니다.

둘 다 .validateField(field) 메서드를 호출하며, 이 메서드는 필드가 표준 제약 조건 유효성 검사를 통과하는지 확인합니다. 통과하면 해당 필드에 할당된 모든 사용자 정의 유효성 검사 함수가 순서대로 실행됩니다. 모든 필드가 true를 반환해야 필드가 유효합니다.

유효하지 않은 필드에는 필드의 부모 요소에 invalid 클래스가 적용되어 있으며, CSS를 사용하여 빨간색 도움말 메시지를 표시합니다.

마지막으로, 전체 양식이 유효할 때 객체는 사용자 정의 submit 함수를 호출합니다:

// 사용자 정의 submit
contactForm.submit = e => {
  e.preventDefault();
  alert('Form is valid!\n(open the console)');
  const fd = new FormData(e.target);
  for (const [name, value] of fd.entries()) {
    console.log(name + ': ' + value);
  }
}

또는, FormValidate가 양식이 유효하지 않을 때 추가 핸들러가 실행되지 않도록 방지하기 때문에 표준 addEventListener를 사용하여 양식 submit 이벤트를 처리할 수 있습니다.

Form Finesse

양식은 모든 웹 애플리케이션의 기반이며, 개발자들은 사용자 입력을 조작하는 데 상당한 시간을 보냅니다. 제약 조건 유효성 검사는 잘 지원되며, 브라우저는 대부분의 검사를 처리하고 적절한 입력 옵션을 표시할 수 있습니다.

추천 사항:

• 가능한 한 표준 HTML 입력 유형을 사용하세요. min, max, step, minlength, maxlength, pattern, required, inputmode, autocomplete 속성을 적절하게 설정하세요.
• 필요한 경우 사용자 정의 유효성 검사 및 메시지를 활성화하기 위해 약간의 JavaScript를 사용하세요.
• 복잡한 필드의 경우 표준 입력을 점진적으로 강화하세요.

마지막으로: 인터넷 익스플로러는 잊으세요!

고객이 대부분 IE 사용자가 아닌 이상, 자체 폴백 유효성 검사 기능을 구현할 필요는 없습니다. 모든 HTML5 입력 필드는 IE에서 작동하지만 사용자 노력이 더 필요할 수 있습니다. (예를 들어, IE는 잘못된 이메일 주소를 입력할 때 감지하지 못합니다.) 서버에서 데이터를 검증해야 하므로, 이를 IE 오류 검사의 기반으로 사용하십시오.

HTML 양식 및 제약 조건 검증에 대한 자주 묻는 질문 (FAQs)