jQuery.validate와 spring validate 연동
다음과 같은 jQuery.validate를 사용하는 jQuery plug-in을 만들고
;(function($){
$.fn.ajaxHandler = function(instanceSettings) {
$.fn.ajaxHandler.defaultSettings = {
validator : null,
action : null,
method : null,
data : null,
dataType : "json",
cache : false,
eventName : "submit",
// function
beforeSendFunction : null,
successFunction : null,
errorFunction : null,
completeFunction : null,
};
var settings = $.extend({}, $.fn.ajaxHandler.defaultSettings, instanceSettings || {});
var ajaxThis = $(this);
//jQuery validation을 통과한 데이터를 이용해서 Spring에 ajax 호출을 시도한다.
$(this).off(settings.eventName);
$(this).on(settings.eventName, function() {
$.ajax({
url : (settings.action == null) ? $(this).attr("action") : settings.action,
type : (settings.method == null) ? $(this).attr("method") : settings.method,
data : (settings.data == null) ? $(this).serialize() : settings.dataType,
dataType : settings.dataType,
cache : settings.cache,
// ajax와 validation을 동시에 사용하기 위해서 사용한다.
beforeSend : function() {
var beforeSendResult = true;
if (settings.beforeSendFunction != null)
beforeSendResult = settings.beforeSendFunction();
var validationResult = true;
if (ajaxThis.get(0).tagName == "FORM" && settings.validator != null) {
validationResult = ajaxThis.valid();
if (!validationResult)
settings.validator.focusInvalid();
}
return (validationResult && beforeSendResult) ? true : false;
},
complete : function (request) {
if (settings.completeFunction != null)
settings.completeFunction(request);
},
success : function (jsonResult, textStatus, httpRequest) {
if (settings.successFunction != null)
settings.successFunction(jsonResult, textStatus, httpRequest);
},
error : function (httpRequest, ajaxOptions, thrownError) {
if (settings.errorFunction != null)
settings.errorFunction(httpRequest, ajaxOptions, thrownError);
if (400 == httpRequest.status &&
settings.validator != null &&
ajaxThis.get(0).tagName == "FORM") {
validationError(httpRequest, settings.validator);
} else {
$.processErrorForAjax(httpRequest);
}
}
});
// browser가 form을 submit하는 것을 막기 위해서 false를 리턴한다.
// true를 리턴할 경우 Spring이 반환하는 jsonResult 데이터가 화면에 표시된다.
return false;
});
//Validation Error 공통으로 처리하는 함수
//Spring에서 전달한 jsonData를 <filed, message>형태로 생성한후
//jQuery Validation을 통해서 Error message를 출력한다.
function validationError(request, validator) {
if (null == request)
return;
if (400 == request.status) {
var requestResult = $.parseJSON(request.responseText).result;
var errors = new Array();
$.each(requestResult, function() {
errors[this.field] = this.message;
});
validator.showErrors(errors);
validator.focusInvalid();
}
};
};
})(jQuery);
$(document).ready(function () {
$.validator.setDefaults({
errorElement: "span",
errorPlacement: function(error, element) {
var field = element.attr('id');
error.attr('id', field + '.errors');
error.insertAfter(element);
}
});
});
Controller에서는 다음과 같이 호출하고
private JsonResult getValidationErrorResult(BindingResult result, JsonResult jsonResult) {
jsonResult.setCode(HttpServletResponse.SC_BAD_REQUEST);
jsonResult.setMessage("Validation Error");
List<ValidationError> errors = new ArrayList<ValidationError>();
for (FieldError fieldError : result.getFieldErrors()) {
String message = this.messageSource.getMessage(
fieldError.getCode(), fieldError.getArguments(), Locale.getDefault());
errors.add(new ValidationError(fieldError.getField(), fieldError.getCode(), message));
}
jsonResult.setResult(errors);
return jsonResult;
}
@RequestMapping(value="/save", method=RequestMethod.POST)
public @ResponseBody JsonResult getFaxSearchList(HttpServletResponse httpResponse,
@Validated({Default.class}) @ModelAttribute FaxHistory faxHistory, BindingResult result) {
JsonResult response = new JsonResult();
if (result.hasErrors()) {
response = getValidationErrorResult(result, response);
httpResponse.setStatus(HttpServletResponse.SC_BAD_REQUEST);
return response;
}
// restTemplate로 DB Insert 처리
// Business Process
return response;
}
다음과 같이 호출하면 jQuery.validate의 에러처리와 spring의 에러처리하는 부분을 일관되게 하며, ajax 호출하는 부분도 일괄되게 할수 있지 않을지? 소스는 좀더 하면서 가다들어야 할듯...
// ajaxHandler 연동
$("#frmFaxHistory").ajaxHandler({
validator : faxHistoryValidator,
successFunction: function(jsonResult, textStatus, httpRequest) {
alert(' success Function 사용자 정의 호출 시');
}//,
// errorFunction : function(httpRequest, ajaxOptions, thrownError){
// alert(' error Function 사용자 정의 호출시');
// }
});