🌐 웹개발/웹 개발

[jQuery | 제이쿼리] 유효성 검사 플러그인 jQuery Validation Plugin

두_두 2024. 3. 18. 14:15

jQuery Validation Plugin 

 

GitHub - jquery-validation/jquery-validation: jQuery Validation Plugin library sources

jQuery Validation Plugin library sources. Contribute to jquery-validation/jquery-validation development by creating an account on GitHub.

github.com

 

 

이번 플젝에서는 제이쿼리를 많이 쓰는데, 제이쿼리 플러그인을 이용해서 validation을 손쉽게 할 수 있다해서 적용해보았다. rule과 message를 설정하면 플러그인이 자동으로 유효성을 체크하고 에러 메시지를 표시해줘서 매우 편리했다! 🩷🧡💛

 

 

🌈 예제

간단한 form을 예제로 만들어 보았다. ➡️ 유효성을 만족시켜야 버튼의 색깔이 바뀔 수 있도록 구현

See the Pen jquery-validation by Lee Seul Yi (@Seyiul) on CodePen.

 

💡 Tip

  • jQuery Validation Plugin은 선택자로 name을 쓴다.
  • input 태그에 required를 설정해야 유효성 검사에 포함된다.
  • valid()를 통해서 해당 form이 유효한지 boolean 값으로 알 수 있다.
  • message를 설정하지 않으면," This field is required."라는 메세지가 자동으로 표시된다.

 

 

 

728x90