jQuery validation plugin을 이용한 form validation 처리 4

validation 처리 관련 마지막으로 살펴볼 것은 validation 메서드 중 하나인 remote이다.

 

remote는 이름 대로 서버를 호출해서 원격에서 validation을 확인 받는다. 쉽게 접할 수 있는 예는 아이디가 중복되었는지를 확인하는 경우가 일반적이다.

<label class="input-title" for="id">아이디 * </label>
<input type="text" id="id" name="id" placeholder="중복되면 안되요">

 

remote는 서버를 ajax 형태로 호출해서 결과를 전달받는다. 따라서 remote의 속성으로는 ajax를 호출하기 위한 options 객체가 설정된다.

$("#myform").validate({
		rules : {
			id : {
				required : true,
				remote : {
					url : "../ValidateionMock",
					type : "post
					data : {
						id : function(){
							return $("#id").val();	
						}
					}
				}
			}
		},
		messages : {
			id : {
				required : "필수 입력이거든.",
				remote : "이미 사용중이야."
			}
		},

 

id에 설정된 rule 중 remote를 살펴보자. 

전형적인 ajax 코드라 특별히 설명할 것은 없지만 data를 쓸 때 주의 해야 하는데 id 값을 동적으로 넘겨주기 위해  함수의 return 값 형태로 해주어야 한다.

 

이에 대한 서버를 살펴보자. 서버는 성공 시 반드시 true 라는 문자열을 반환해줘야 한다. 아래의 예를 Hello, Java, World 3개의 단어가 이미 사용중으로 설정해 놓고 true/false를 반환한다.

@WebServlet("/ValidateionMock")
public class ValidateionMock extends HttpServlet {
    private static final long serialVersionUID = 1L;

    String[] alreadyUsed = {"Hello", "Java", "World"};

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json");
        String id = request.getParameter("id");
        List<String> list = Arrays.asList(alreadyUsed);
        response.getWriter().append(!list.contains(id) ? "true" : "false");
    }
}

 

다음은 동작 예이다.

 

 

이상으로 jquery를 이용한 form validation관련 연재를 마친다.

하지만 여기서 소개한 validation은 클라이언트에서의 validation 처리라는 것을 명심하다.

해커는 중간에 사용자의 입력 값을 변경할 수 있고 클라이언트 validation은 이런 경우 무용 지물이다. validation은 반드시 서버에서도 이루어져야 한다.

 

[관련글]

validation 처리 1: www.goodteacher.tistory.com/161

validation 처리 2: www.goodteacher.tistory.com/162

validation 처리 3: www.goodteacher.tistory.com/163

validation 처리 4: www.goodteacher.tistory.com/164