사용자가 양식에 올바른 데이터를 입력하도록 지원

브라우저에는 사용자가 데이터를 올바른 형식으로 입력했는지 확인하는 검사 기능이 내장되어 있습니다. 이러한 지형지물은 올바른 요소와 속성을 사용하여 활성화할 수 있습니다. 게다가 CSS와 JavaScript를 사용하여 양식 유효성 검사를 개선할 수 있습니다.

양식을 확인해야 하는 이유는 무엇인가요?

이전 모듈에서는 사용자가 반복 작업을 하지 않아도 되게 하는 방법을 배웠습니다. 양식에 정보를 다시 입력하는 경우 사용자가 유효한 데이터를 입력하도록 하려면 어떻게 해야 하나요?

필수 입력란도 모르고 양식을 작성하는 것이 불편하기 때문에 제약 조건을 지정할 수 있습니다. 예를 들어 사용자 이름을 입력하고 양식을 제출했는데 사용자 이름이 8자 이상이어야 한다는 것만 확인합니다.

유효성 검사 규칙을 정의하고 이를 알려 사용자에게 도움을 줄 수 있습니다.

사용자가 실수로 필수 입력란을 누락하지 않도록 지원

HTML을 사용하여 양식에 입력한 데이터에 올바른 형식과 제약 조건을 지정할 수 있습니다. 또한 필수 입력란도 지정해야 합니다.

데이터를 입력하지 않고 이 양식을 제출해 보세요. <input>에 필수 입력란임을 나타내는 오류 메시지가 첨부되어 있나요?

이는 required 속성으로 인해 발생합니다.

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

더 많은 유형(예: type="email")을 사용할 수 있다는 것을 이미 알아봤습니다. 필수 이메일 주소(<input>)를 확인해 보세요.

데이터를 입력하지 않고 이 양식을 제출해 보세요. 이전 데모와 다른 점이 있나요? 이제 이메일 입력란에 이름을 입력하고 제출해 보세요. 다른 오류 메시지가 표시됩니다. 어떻게 이런 일이 가능한가요? 입력한 값이 유효한 이메일 주소가 아니므로 다른 메시지가 표시됩니다.

required 속성은 필드가 필수임을 브라우저에 알립니다. 브라우저는 입력된 데이터가 type 형식과 일치하는지도 테스트합니다. 예에 표시된 이메일 필드는 비어 있지 않고 입력된 데이터가 유효한 이메일 주소인 경우에만 유효합니다.

사용자가 올바른 형식을 입력하도록 지원

필드를 필수로 만드는 방법을 알아봤습니다. 사용자가 양식 입력란에 최소 8자 이상을 입력해야 한다고 브라우저에 지시하려면 어떻게 해야 할까요?

데모를 사용해 보세요. 변경 후 8자 미만을 입력하면 양식을 제출할 수 없습니다.

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

유효성 검사 규칙 전달

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

모든 사용자가 유효성 검사 규칙을 이해하도록 합니다. 이렇게 하려면 양식 컨트롤을 규칙을 설명하는 요소와 연결하세요. 이렇게 하려면 양식의 id를 사용하여 요소에 aria-describedby 속성을 추가합니다.

패턴 속성

고급 유효성 검사 규칙을 정의해야 하는 경우도 있습니다. 마찬가지로 HTML 속성을 사용할 수 있습니다. 이를 pattern라고 하며, 정규 표현식을 값으로 사용합니다.

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

여기에서는 소문자만 허용됩니다. 사용자는 최소 2자 이상, 최대 20자를 입력해야 합니다.

대문자도 허용하도록 pattern를 어떻게 변경하나요? 사용해 보기

스타일 추가

지금까지 HTML에서 유효성 검사를 추가하는 방법을 알아보았습니다. 유효성 검사 상태에 따라 양식 컨트롤의 스타일을 지정할 수도 있다면 좋지 않을까요? CSS를 사용하면 가능합니다.

필수 양식 입력란의 스타일을 지정하는 방법

양식과 상호작용하기 전에 필수 입력란임을 사용자에게 알립니다.

:required CSS 의사 클래스로 required 필드의 스타일을 지정할 수 있습니다.

input:required {
  border: 2px solid;
}

잘못된 양식 컨트롤의 스타일 지정

사용자가 입력한 데이터가 잘못된 경우 어떻게 되는지 기억하시나요? 양식 컨트롤에 첨부된 오류 메시지가 표시됩니다. 이 경우 요소의 모양을 조정하는 것이 좋지 않을까요?

:invalid 의사 클래스를 사용할 수 있습니다. 잘못된 양식 컨트롤에 스타일을 추가합니다. 또한 유효한 양식 요소의 스타일을 지정하는 :valid 의사 클래스도 있습니다.

유효성 검사를 기반으로 스타일을 조정하는 더 많은 방법이 있습니다. CSS 관련 모듈에서는 양식 스타일 지정에 관해 자세히 알아봅니다.

JavaScript를 사용한 유효성 검사

양식을 더욱 효과적으로 확인하려면 JavaScript Constraint Validation API

의미 있는 오류 메시지 제공

오류 메시지가 모든 브라우저에서 동일하지는 않다는 것을 이전에 배웠습니다. 어떻게 하면 모두에게 동일한 메시지를 보여줄 수 있을까요?

이를 위해서는 setCustomValidity() 드림 메서드를 사용할 수 있습니다. 그럼 방법을 알아보겠습니다.

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

커스텀 오류 메시지를 설정할 요소를 쿼리합니다. 정의된 요소의 invalid 이벤트를 수신합니다. 여기서 setCustomValidity()로 메시지를 설정했습니다. 이 예시에서는 입력이 잘못된 경우 Please enter your name. 메시지를 표시합니다.

여러 브라우저에서 데모를 엽니다. 모든 곳에서 동일한 메시지가 표시되어야 합니다. 이제 자바스크립트를 삭제하고 다시 시도하세요. 기본 오류 메시지가 다시 표시됩니다.

Constraint Validation API로 할 수 있는 작업은 훨씬 더 많습니다. 자세한 내용은 Cloud Build를 사용하여 JavaScript로 유효성 검사에 관해 자세히 알아보겠습니다.

실시간으로 검증하는 방법 양식 컨트롤의 onblur 이벤트를 수신 대기하여 JavaScript에 실시간 유효성 검사를 추가할 수 있습니다. 사용자가 양식 입력란을 떠날 때 즉시 입력의 유효성을 검사할 수 있습니다.

데모의 양식 필드를 클릭합니다. 'web'을 입력합니다. 페이지의 다른 곳을 클릭합니다. 양식 필드 아래에 minlength에 관한 기본 오류 메시지가 표시됩니다.

구현 자세히 알아보기 JavaScript로 실시간 유효성 검사를 살펴보겠습니다.

이해도 확인

양식 확인에 대한 지식 테스트

리소스

• 양식을 제출하면 결제 버튼 사용 중지
• CSS를 추가하여 양식 성능 개선하기