유효성 메시지

폼 컨트롤에서 "유효성"이란 선택이 아닌 필수..!

우연히 Vue 튜토리얼을 따라하다가
<input> 태그에 필수값 속성 required이 있을 때 빈 값으로 form submit 시
"이 입력란을 작성하세요." 메시지가 뜨는 것을 보고 호기심이 발동했다.

사실 어지간하면 정석, 근본, 순정, 오피셜을 선호하는 편이라
이 기능을 잘 활용 해보고 싶은 충동(?)이 마구마구🧐

폼 필수 입력 메시지 변경 방법 (form required message customizing)
HTML form에서 input이나 select를 필수로 하게 해야할 때가 있다. (...)
태그 내부에 required와 함께 oninvalid, oninput 옵션을 작성해주어야 한다.
oninvalid에는 값이 선택되지 않거나 입력이 되지 않았을 때 등장하는 메시지이고
oninput은 값이 입력되거나 선택되었을 때 발생하는 메시지로 비워두면 된다.

oninvalid="this.setCustomValidity('목록에서 항목을 선택하세요.')"
oninput="this.setCustomValidity('')"

oninput을 주지 않으면,
invalid 메시지를 띄운 후, 입력할 때마다 메시지를 반복해서 띄운다. (밑에서 다시 등장📌)

oninvalid Event | W3schools
oninput Event | W3schools

HTMLObjectElement: setCustomValidity() method
HTMLObjectElement 인터페이스의 setCustomValidity() 메소드는 요소에 대한
사용자 정의 유효성 메시지를 설정합니다.

위 글에서는 아래와 같은 예제와 설명이 등장하는데,

function validate(inputID) {
  const input = document.getElementById(inputID);
  const validityState = input.validity;

  if (validityState.valueMissing) {
    input.setCustomValidity("여기 빈칸 채워야 해");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("더 큰 숫자가 필요해");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("이건 또 너무 큰데");
  } else {
    input.setCustomValidity(""); //2️⃣
  }

  input.reportValidity(); //1️⃣
}

입력 요소의 ID를 전달하고 값이 누락되었는지, 너무 낮거나 너무 높은지에 따라
다른 오류 메시지를 설정합니다.
1️⃣ 또한 동일한 요소에 대해 reportValidity 메소드를 호출해야 합니다.
그렇지 않으면 아무 일도 일어나지 않습니다.
2️⃣ 오류가 없는 경우 메시지를 빈 문자열로 설정하는 것이 중요합니다.📌
오류 메시지가 비어 있지 않으면 양식이 유효성 검사를 통과하지 못하고 제출되지 않습니다.

위 코드에서 또 파헤칠 것들이 많아보인다.

---

일단 <input> 하나를 만들고 required 속성을 줘본다.

<input id="test" required>

const input = document.getElementById("test");
console.log(typeof input); // -> object HTMLInputElement
console.log(input);

하게 되면 콘솔에 무수한 속성(Properties)과 메서드(Methods)가 찍히는데,
그중에 validationMessage 와 validity 속성을 확인할 수 있다 !

저 기본 텍스트가 어디에 박혀있던건지 출처를 알아냈다(? 숨긴적없음).
예제에서 사용했던 valueMissing, rangeUnderflow, rangeOverflow 속성도 다 있다.

validity 속성은 ValidityState 객체로 아래의 불리언 속성들을 포함한다.
각 속성은 입력 필드의 유효성 검사 상태를 나타내고 대체로 기본 false값을 가지는 듯!

• valueMissing : 빈값일 때 true
• badInput : 입력값이 잘못된 값일 때 true
• patternMismatch : pattern 속성의 정규 표현식과 일치하지 않을 때 true
• stepMismatch : step 속성에 정의된 값과 일치하지 않을 때 true 🔍참고
• typeMismatch : 요구하는 형식(type=email, url)에 맞지 않을 때 true
• rangeOverflow : 입력값이 max보다 길 때 true
• rangeUnderflow : 입력값이 min보다 짧을 때 true
• tooLong : 입력값이 maxlength보다 길 때 true
• tooShort : 입력값이 minlength보다 짧을 때 true
• valid : 입력 필드가 유효할 때 true (다른 모든 속성이 false)
• customError : setCustomValidity() 메서드에 의해 사용자 정의 오류 메시지가 설정되었을 때 true

🔗 ValidityState
(MDN-EN) (MDN-KO) (Runebook.dev)

input 태그의 max와 maxlength의 차이
max/min : 숫자의 최대/최소값 (date, datetime, datetime-local, month, number, range, time, week)
max/minlength : 글자수 제한

---

이제 setCustomValidity()와 위의 예제는 이해했고,
관련된 메서드들도 보고 넘어가자.

• HTMLObjectElement.checkValidity()
  유효성을 검증해 불리언 값 반환
• HTMLFormElement.reportValidity()
  유효성을 검증해 불리언 값 반환 + 오류 메시지 표시

Form의 checkValidity 기능
전체 서식(form)의 입력이 유효한지를 알고 싶을 때 이용할 수 있는 기능.
checkValidity는 오류 메시지를 보여주지 않고 reportValidity는 서식의 전송 버튼을 누른 것처럼 오류메시지를 표시하지만 서식 전송은 하지 않는다.
이를 이용해서 필수 입력 사항을 모두 기입했는지 서식 단위로 확인이 가능하다.

checkValidity vs reportValidity | CodePen

form 다루기 | Observable

// 변화가 일어날 때마가 사용자에게 즉시 에러 메시지를 보여주고 싶으면
doc02.querySelector("#userid").onchange = e => {
  const input = e.target
  input.checkValidity()  // 검사를 하고
  input.reportValidity() // 검사 결과를 보여주자
}

💭검사하는 과정(checkValidity)이 굳이 따로 필요한지?
💭예제에서 reportValidity() 호출이 꼭 필요하다는데 실습해 본 코드에서
해당 부분을 지워도 동일하게 동작하는 것처럼 보인다 ..GG