jQuery 유효성 검사 .validate() ignore 옵션

쥬쥬·2024년 1월 15일

ignore 옵션의 default는 :hidden 이다. 즉, type="hidden" 속성을 가진 입력 필드는 유효성 검사에서 제외된다는 것.

jQuery 공식 문서 발췌
https://jqueryvalidation.org/validate/

ignore (default: ":hidden")
Type: Selector
Elements to ignore when validating, simply filtering them out. jQuery's not-method is used, therefore everything that is accepted by not() can be passed as this option. Inputs of type submit and reset are always ignored, so are disabled elements.

  • ignore 옵션의 default는 :hidden 이다. 즉, type="hidden" 속성을 가진 입력 필드는 유효성 검사에서 제외된다는 것.
  • :hidden은 display: none;을 포함해서 $("#abc”) display:none인 경우, $("#abc”).is(':hidden')은 true가 된다.

또한, disabled 상태의 필드는 유효성 검사 과정에서 제외되므로, 해당 필드는 유효성 검사에서 '유효'로 간주되어 .valid()가 true를 반환한다는 것.

$("#myform").validate({
  ignore: ".ignore"
});

Example: Ignores all elements with the class "ignore" when validating.
예시는 ignore 클래스는 유효성 검사를 하지 않는다는 것을 의미함.

  • 내가 마주한 문제는 아래와 같다.

    상세 조회를 할 때, 값이 있음에도 불구하고 유효성 검사에서 오류를 나타내는 알람이 떴다.

  • 오류의 원인은 아래의 상황으로 의심된다.
    (검증하려고 다양한 방법으로 시도했으나 정확한 이유를 검증하진 못해서 의심으로 남았다..)

    모달 창의 값을 다 불러오기 전에 .valid()가 실행이 되어 유효성 검사에서 오류가 발생했다고 나타나는 주황색 알람이 표시됨 → disabled는 유효성 검사에서 제외되므로 값이 있어도 valid() 가 true임에도 계속 주황색 알람이 표시
    이 상황에서 값이 있는 disable된 필드를 .valid() 유효성 검증 하면 주황색 알람이 사라진다.

  • 해결방법 : ignore []를 사용

ignore: [] 옵션을 사용하면, 유효성 검사에서 아무 필드도 제외하지 않겠다는 의미가 되어 모든 필드(숨겨진 필드와 비활성화된 필드 포함)가 유효성 검사의 대상이 된다.

아래와 같은 흐름으로 해결된 것으로 보인다.

disabled 이지만 유효성 검사를 하여 값이 있는 것을 확인하고 주황색 알람이 뜨지 않는 것으로 보인다.

0개의 댓글