jQuery Form Validation 사용중 iCheck errorPlacement 처리

iCheck는 checkbox, radio 버튼을 이미지와 css를 이용하여 예쁘게 보여줍니다.

하지만, 여러가지 면에서 매우매우매우 불편한데요.

제가 느낀 단점.

1. 마지막 업데이트 이후 유지보수가 되지 않고 있습니다. (에러는 본인이 수정해야 하며)

2. 익스플로러에서는 속도가 매~우 느립니다. (익스 외의 크롬 등에서는 빠름, 브라우저의 렌더링 속도가 느린탓.)

3. jQuery Form Validation 사용시 메세지가 이상한 위치(?)에 출력됨

오늘은 3번째 단점 때문에 이 포스팅을 올립니다.

iCheck의 경우 렌더링을 할때 div를 여러개 생성하기 때문에 에러메세지의 위치는 iCheck의 가장 바깥쪽에 있는 엘리먼트의 다음에 와야합니다.

따라서 iCheck에는 사용이 부적합한데요.

[에러메시지가 iCheck와 겹쳐지는 현상]

이런 경우 form Validate에서 제공해주는 validate() 메소드 사용시 옵션을 추가로 써주시면 됩니다.

errorPlacement: function(error, element) {
	if(element.attr("name") == "whof_yn") {
		error.insertAfter(element.parent().parent().parent());
	} else {
		error.insertAfter(element);
	}
}

엘리먼트의 id 값을 비교하여, error 메세지를 어디에 넣을지 결정해줍니다.

만약에 엘리먼트의 name값이 whof_yn (재직여부) 라면 현재 엘리먼트의 부모에 부모에 부모 엘리먼트의 위치를 찾아서 그 밑에 에러메세지를 추가해주는겁니다.

이렇게 처리를 해주시면 해결이 완료됩니다.