html에서 bindException 결과 처리 시 순서 지정하기

사용자에게 입력을 받은 데이터의 정규식 체크가 올바른가에 대해 기존에는 client, server 양쪽다 체크해야 한다고 생각한 때가 있다.

요즘은 에러에 대해 공통화 처리로 개발을 하면서 굳이 client에서 체크할 필요가 있을까 싶다.

bindException의 경우 array 형태로 에러 결과를 반환한다.

{
    "result": [{
        "errorCode": null,
        "exceptionClassName": "bindException",
        "message": "소개글을 입력해주세요.",
        "object": "fooClass",
        "field": "intro",
        "displayableMessage": true
    }, {
        "errorCode": null,
        "exceptionClassName": "bindException",
        "message": "이미지를 선택해주세요.",
        "object": "fooClass",
        "field": "imgSrc",
        "displayableMessage": true
    }, {
        "errorCode": null,
        "exceptionClassName": "bindException",
        "message": "길드이름을 입력해주세요.",
        "object": "fooClass",
        "field": "guildName",
        "displayableMessage": true
    }, {
        "errorCode": null,
        "exceptionClassName": "bindException",
        "message": "서버를 선택해주세요.",
        "object": "fooClass",
        "field": "serverId",
        "displayableMessage": true
    }, {
        "errorCode": null,
        "exceptionClassName": "bindException",
        "message": "내용을 입력해주세요.",
        "object": "fooClass",
        "field": "contents",
        "displayableMessage": true
    }]
}

각각의 에러를 표시하는 위치가 개별로 존재한다면 별 문제가 없지만 특정 단일 영역에 저 많은 에러들 중 우선순위를 정해 하나만 표시하고 싶은 경우 순서가 중요해진다.

문제는 bindException은 순서를 지정하는 기능이 없다는 점이다.

이에 대해서 javascript의 sort 처리로 순서를 정하는 식으로 해결을 하였다.

function sortFunc(a, b, targetKey, targetArray) {
    var aCodeIndex = $.inArray(a[targetKey], targetArray);
    var bCodeIndex = $.inArray(b[targetKey], targetArray);
    if (aCodeIndex > -1 && bCodeIndex > -1) {
        return aCodeIndex > bCodeIndex;
    } else if (aCodeIndex > -1) {
        return false;
    } else if (bCodeIndex > -1) {
        return true;
    } else {
        return a[targetKey] > b[targetKey];
    }
}

function errorMessageSort(a, b) {
    var sortKeyOrder = ["serverId", "guildName", "intro", "imgSrc", "contents", "phoneNumber"];
    return sortFunc(a, b, "field", sortKeyOrder);
}

$.ajax({
    url : "[호출주소]",
    type : "POST",
    data : [데이터파라메터]
}).done(function(data) {
    //성공한 경우 처리
}).fail(function(jqXHR, textStatus, errorThrown) {
    jqXHR.responseJSON.result.sort(errorMessageSort);
 
    $("[메세지를 보여줄 영역]").text(jqXHR.responseJSON.result[0].message).show();
}