input요소 checkValidity와 reportValidity

HTML에서 <input/>요소는 required나 pattern, minLength, maxLength와 같은 속성들을 통하여 현재 입력된 값에대한 유효성 검사를 할수 있습니다. 일반적으로는 해당 <input/>요소가 포함된 form에서 submit요청이 발생하면 먼저 포함된 입력 요소들의 유효성 검사를 진행하고, 유효성 검사를 통과하지 못하면 submit을 더이상 진행하지 않고 onInvalid를 호출하게됩니다.

또한 checkValidity나 reportValidity 함수를 호출하여 즉시 유효성 검사를 진행할수도 있습니다.

export default function App() {
  const [_invalid, _setInvalid] = useState(false);

  function _onBlur(event: FocusEvent<HTMLInputElement>) {
    // 포커스 아웃시 유효성 검사 실행(checkValidity또는 reportValidity실행)
    event.target.checkValidity();
  }

  function _onInvalid(event: FormEvent<HTMLInputElement>) {
    _setInvalid(true);
  }

  return (
    <div style={{ padding: "2rem" }}>
      <input
        className={_invalid ? "Input" : ""}
        required
        onBlur={_onBlur}
        onInvalid={_onInvalid}
      />
    </div>
  );
}

checkValidity와 reportValidity 차이

checkValidity와 reportValidity 둘다 모든 유효성 검사가 통과되면 true를 반환하며, 하나라도 유효성 검사를 통과하지 못하면 false를 반환하고 onInvalid 콜백을 호출하게 됩니다. 다만 reportValidity의 경우 onInvalid로 전달된 event가 중간에 취소되지 않는다면 사용자에게 리포팅되어 브라우저에서 표시(또는 자동 포커싱)를 해줍니다.

 

checkValidity를 사용한 경우

reportValidity를 사용한 경우