Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

jquery.validate.js 폼 검증 플러그인 – 체크박스/라디오 버튼 검증과 에러메시지 위치 지정하기

[2013-09-27 추가 : 최근에 새로 발견한 폼 검증 플러그인으로 Parsley.js가 있는데, 이게 더 좋아 보인다. 문서도 잘 돼 있다. 단, IE6를 지원하지 않는다. 따라서 한국에서는 당분간 쓰기 힘들 것 같다. 아니면, 서버단 밸리데이션을 반드시 하면서 js를 보조적으로만 활용할 때 Parsley.js를 사용하면 되겠다. (사실 당연한 이야기긴 하지만 말이다.)]

jQuery 폼 검증 플러그인 간단 사용법은 아주 예전에 쓴 적이 있다. 오늘은 두 가지를 추가로 설명할 생각이다. 나도 그 때보다 많이 실력이 늘었다. 하나는 체크박스나 라디오 버튼 검증, 다른 하나는 메시지를 원하는 위치에 띄우는 방법이다. 데모부터 보고 싶은 사람은 아래 링크로 데모를 보면 되겠다.

▶데모 보기

체크박스나 라디오 버튼 검증

체크박스나 라디오 버튼의 공통점은 같은 name을 가지는 여러 개의 input이 있다는 거다. 이 때 사용법은 간단한데, 여러 개의 input들 중 맨 앞에 있는 inputrequired 클래스를 부여하는 것이다.

HTML5 문법

HTML5 문법을 사용할 수도 있다. 자바스크립트가 켜져 있다면 jquery.validate.js 플러그인이 처리해 줄 테고, 자바스크립트가 꺼져 있다면 브라우저에서 처리해 줄 거다. HTML5 문법에서 체크박스나 라디오를 필수로 만들려면 모든 inputrequired="required"라고 써 준다. (혹은 required 라고만 써 주거나 required="" 라고 써 줘도 된다. 그러나 required="true" 이런 건 안 된다.)

메시지를 원하는 위치에 띄우기

jquery.validate.js 플러그인인 input 요소의 바로 뒤에 label.error 요소를 생성해서 에러메시지를 띄운다.

라디오 버튼과 체크박스는 input 요소가 여러개다. 그런데 맨 처음 요소에만 required 클래스를 넣어 준다. 그래서 따로 처리를 안 해 주면 에러 메시지가 뜰 때 첫 번째 input의 바로 뒤에 뜨게 된다. 아래처럼 말이다.

이 때 label.error 태그를 명시해 주면 에러 메시지를 자동으로 삽입하지 않고, 이미 있는 label.error 요소를 사용하게 된다.

<p>고장 내용을 설명해 주시겠습니까?</p>
<p>
  <label for="고장내용" class="error">필수입니다.</label>
</p>
<p>
  <input required="required" type="checkbox" name="고장내용" id="고장내용1" value="얼음성형 안 됨" />
  <label for="고장내용1">얼음성형 안 됨</label>
  <input required="required" type="checkbox" name="고장내용" id="고장내용2" value="얼음이 안 떨어짐" />
  <label for="고장내용2">얼음이 안 떨어짐</label>
  <input required="required" type="checkbox" name="고장내용" id="고장내용3" value="전원이 안 들어옴" />
  <label for="고장내용3">전원이 안 들어옴</label>
</p>

유의점은 한 가지다. label.error 요소의 for 속성은 inputname으로 해야 한다.

또한 CSS 수준에서 display:none을 해 주는 것도 잊지 말자. 안 그러면 에러 메시지가 늘 보이게 된다. 이 때 .error에 속성을 부여하지 말고 label.error에 속성을 부여해야 한다. validate 플러그인이 에러를 표시할 때 input에도 error 클래스를 매기기 때문에 .error에만 display:none 속성을 부여하면 에러 발생시 input도 함께 사라지게 된다.

이상이다. 나머지는 데모를 보고 알아서 탐구하면 되겠다.

▶데모 보기

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (1개)

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다