Client-side form validation를 알아야 하는 이유

server에서 validation을 처리하면 delay가 발생한다.

• client에서 server로 갔다가 다시 돌아와서 오류메세지를 보여주기 때문이다.
• 따라서 client 단에서 form validation을 실행시켜서 한번 필터링을 해줘야 성능면에서 좋다.

Client-dise form validation 종류

html의 기본적인 validation인 Built-in form validation과 JS를 활용한 JS Validation이 존재한다.

Built-in form validation

1. validation attributes
   1. required
      1. 해당 input이 필수임을 비어서는 안됨을 나타냄.
      2. :required가 설정됨. 비어있는데 보내면 :invalid도 함께 (:required의 반대는 :optional)
   2. minlength, maxlength
      1. textarea나 input의 길이를 제한한다.
   3. min, max
      1. number input의 수를 제한한다.
      2. 소수자리를 (step으로 바뀌는) 침법하게 입력하거나 최대값, 최소값 넘겨서 직접 입력 시키면 invalid
   4. pattern
      1. regular expression 사용
      2. a, abc, ab?c, ab*c, a|b, abc|xyz, [aA]
      3. textarea는 지원 안함.
      4. empty되어 있지않고 regexps와 맞지 않으면 :invalid
2. valid가 되면!
   1. :valid (CSS pseudo-class) 에 일치함.
   2. browser가 멈출게 있는지 확인한 후에 data를 server에 전송한다.
3. invalid가 되면!
   1. :invalid (CSS pseudo-class)에 일치함. (상황에 따라 :out-of-range도)

JS Validation

1. Constraint Validation API

   1. DOM interface에는 validation과 관련된 method와 property가 존재한다.
      1. validationMessage
         1. control이 뭐를 불만족하는지를 알려주는 메세지를 return
         2. willvalidate 가 false (validation대상이 아님) 이거나 valid한 value를 갖고 있으면 return empty string
      2. validity
         1. ValidityState object를 뱉는다.
            1. patternMismatch
            2. tooLong
            3. tooShort
            4. rangeOverflow
            5. rangeUnderflow
            6. typeMismatch
            7. valid
            8. valueMissing
      3. willValidate
      4. checkValidity()
         1. valid > return true
         2. statically validating the constraints
      5. reportValidity()
         1. 모든 constraint failures를 return true + 오류메세지
         2. interactively validating the constraints
      6. setCustomValidity()
         1. error message 설정
         2. ex) file selector에서 .file.size를 이용하여 file size가 맞지 않으면 오류 메세지 설정 하는 식
      7. ValidityState interface
         1. validity property로 return된 object를 설명한다.

2. novalidate (form attribute)

   1. browser의 automatic validation을 끄는 기능
   2. 사용자 지정으로 구현할 수 있게 해준다. (constraint validation API를 막지 않고 CSS pseudo-class도 막지 않고 오직 browser의 automatic validation만 막기 때문이다.)
   3. error message bubble을 막는다.
   4. interactive validation이 일어나지 않는다고도 한다.

3. 일일이 만드는 방법

   1. regexps의 경우 .test()를 이용해서 조건문에 넣어서 패턴일치를 파악할 수 있다.
   2. css에서 vaild class에 style을 넣는 방식으로 바꿔주고 일일이 js로 조건 쳐내가면 된다.

4. submit() 은 invalid해도 보내버린다. button에 click()하는 방법으로 해야됨.

5. visual styling of constraint validation

   1. 쓰이는 css pseudo-class들
      1. :optional, :required
      2. :placeholder-shown
      3. :valid, :invalid