브라우저에는 사용자가 데이터를 올바른 형식으로 입력했는지 확인하는 확인 기능이 내장되어 있습니다. 올바른 요소와 속성을 사용하여 이러한 지형지물을 활성화할 수 있습니다. 또한 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">
속성 이름은 minlength입니다.
값을 8로 설정하면 원하는 유효성 검사 규칙이 만들어집니다.
그 반대를 원한다면 maxlength를 사용하세요.
유효성 검사 규칙 전달
<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을 변경하려면 어떻게 해야 할까요?
직접 해보기
정답은 pattern="[a-zA-Z]{2,20}"입니다.
스타일 추가
지금까지 HTML에서 유효성 검사를 추가하는 방법을 알아보았습니다. 유효성 검사 상태에 따라 양식 컨트롤의 스타일을 지정할 수도 있다면 얼마나 좋을까요? CSS를 사용하면 가능합니다.
필수 양식 입력란의 스타일을 지정하는 방법
사용자가 양식과 상호작용하기 전에 필드가 필수임을 알려줍니다.
:required CSS 의사 클래스로 required 필드의 스타일을 지정할 수 있습니다.
input:required {
border: 2px solid;
}
잘못된 양식 컨트롤 스타일 지정
사용자가 입력한 데이터가 유효하지 않으면 어떻게 되는지 기억하시나요? 양식 컨트롤에 첨부된 오류 메시지가 표시됩니다. 이 경우 요소의 모양을 조정하는 것이 좋지 않을까요?
:invalid 의사 클래스를 사용하여 잘못된 양식 컨트롤에 스타일을 추가할 수 있습니다.
또한 유효한 양식 요소의 스타일을 지정하기 위한 :valid 의사 클래스도 있습니다.
유효성 검사를 기반으로 스타일을 조정할 수 있는 더 많은 방법이 있습니다. CSS 모듈에서 양식 스타일 지정에 대해 자세히 알아봅니다.
JavaScript로 유효성 검사
JavaScript Constraint Validation API를 사용하면 양식 유효성 검사를 추가로 개선할 수 있습니다.
의미 있는 오류 메시지 제공
앞서 살펴본 오류 메시지는 모든 브라우저에서 동일하지는 않다는 것을 배웠습니다. 모든 사람에게 동일한 메시지를 표시하려면 어떻게 해야 하나요?
이렇게 하려면 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로 할 수 있는 작업은 이보다 훨씬 많습니다. 자바스크립트로 유효성 검사를 사용하는 방법에 관해서는 이후 모듈에서 자세히 알아봅니다.
실시간 유효성 검사 방법
양식 컨트롤의 onblur 이벤트를 수신 대기하여 JavaScript에서 실시간 유효성 검사를 추가하고 사용자가 양식 필드를 떠날 때 즉시 입력의 유효성을 검사할 수 있습니다.
데모의 양식 필드를 클릭하고 'web'을 입력한 후 페이지의 다른 위치를 클릭합니다.
양식 필드 아래에 minlength의 네이티브 오류 메시지가 표시됩니다.
다음 모듈에서 자바스크립트로 실시간 유효성 검사를 구현하는 방법을 자세히 알아보세요.
학습 내용 확인하기
양식 검증에 관한 지식 테스트
양식 컨트롤을 필수로 만들기 위해 사용하는 속성은 무엇인가요?
requiredneededessentialobligatory오류 메시지를 직접 정의할 수 있나요?
message HTML 속성을 사용하면 됩니다.:invalid CSS 의사 요소를 사용하면 됩니다.type="email" 및 required 속성이 있는 <input>를 제출할 수 있습니다.