input required 부분의 메시지 수정하기

최대 1 분 소요

아래와 같이 input 태그에 required 속성을 주게 되면, 이 입력란을 작성하세요라는 경고메시지가 뜬다.

image

하지만 사용자에게 더 자세한 사항을 안내하고 싶을 때에는, onvalid와 oninput 속성을 사용하면 된다.

예시로 4글자의 숫자만 입력해야 하는 경우, oninvalid와 oninput 속성을 지정해주고 출력하고자 하는 메시지를 작성해주면 된다.

<input type="text" name="tel2" 
    pattern="[0-9]{4}" 
    required 
    oninvalid="this.setCustomValidity('4자리 이내의 숫자만 입력하세요')" 
    oninput="setCustomValidity('4자리 이내의 숫자만 입력하세요')"
> 

정상적으로 시행될 시 결과는 아래와 같다.

image