<input ~~~ required /> 처럼 입력란이 필수인 경우,

입력을 하지 않고 submit을 하면 브라우저 별로 기본적으로 설정되어 있는 알림 메시지가 나타난다.

이 때, <input ~~~ required oninvalid="this.setCustomValidity('텍스트 내용')" oninput="setCustomValidity('input에 on되면 나올 내용')" /> 을 설정해주면, 해당 알림 메시지를 수정할 수 있다.

주의할 점은, oninvalid만 사용할 경우 알림 메시지는 변경되어 나타나지만 form이 정상 작동하지 않으므로 반드시 oninput을 함께 사용해야 한다.

oninput의 경우 setCustomValidity의 텍스트를 공백으로 두면 아무런 메시지가 나오지 않고 유효성 검사를 진행되게 할 수도 있다.

+ Recent posts