input required 부분의 메시지 수정하기
아래와 같이 input 태그에 required 속성을 주게 되면, 이 입력란을 작성하세요
라는 경고메시지가 뜬다.
하지만 사용자에게 더 자세한 사항을 안내하고 싶을 때에는, onvalid와 oninput 속성을 사용하면 된다.
예시로 4글자의 숫자만 입력해야 하는 경우, oninvalid와 oninput 속성을 지정해주고 출력하고자 하는 메시지를 작성해주면 된다.
<input type="text" name="tel2"
pattern="[0-9]{4}"
required
oninvalid="this.setCustomValidity('4자리 이내의 숫자만 입력하세요')"
oninput="setCustomValidity('4자리 이내의 숫자만 입력하세요')"
>
정상적으로 시행될 시 결과는 아래와 같다.