AJAX를 활용해 jQuery custom validator를 아래와 같이 추가하는 경우 async로 동작하기 때문에 유효성을 체크하기 전에 form submit이 발생한다.

$.validator.addMethod("validateUserId", function(value, element, param) {
	var validator = this;


	$.post( 
		url, 
		data, 
		function(response) {
			if( response.result ) {
				return true;
			}
			
			var errors = {};
			errors[element.name] = response.errorMessage;
			validator.showErrors(errors);
			return false;
		}		, 
		dataType 
	);
	
	return true;
});

위 코드에서 form submit이 먼저 발생하는 이유는 유효성을 확인하기 전에 function 마지막에 true가 먼저 반환되기 때문이다. 그렇다고 마지막 값을 false로 설정할 경우 유효성을 통과할 수 없는 상황이 발생한다.

이 같은 단점을 막으려면 다음과 같이 async 설정을 false로 해야 한다.

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType,
  async:false
});

위와 같이 async를 false로 설정해 sync로 동작하도록 구현해야 정상적인 동작을 보장할 수 있다.

function myValidator() {
   var isSuccess = false;


   $.ajax({ url: "", 
            data: {}, 
            async: false, 
            success: 
                function(msg) { isSuccess = msg === "true" ? true : false }
          });
    return isSuccess;
}