jq_validation_error_handling_example.html

<script>
$.validator.setDefaults({
    onfocusout: false, 
    invalidHandler: function(form, validator) { // 커스텀 포커스 핸들링
        if (validator.numberOfInvalids()) {
            validator.errorList[0].element.focus();
            //alert(validator.errorList[0].message); // 경고창
        }
    },
    errorClass:'text-danger', // 에러 스타일을 입힐 클래스 지정
    errorPlacement : function(error, element){ // data-error 속성으로 해당 위치 삽입
        var placement = $(element).data('error');
        if (placement) {
            $(placement).append(error);
        } else { // 없을경우 마지막노드 뒤에 삽입
            element.parent().children().last().after(error);
        }
    }
});
</script>

<!-- data-error 속성 사용 예시 -->
<input type="text" name="id" data-error="#id_error"/>
<p id="id_error"></p>