Client Validation.

자바 스크립트로 체크하는 Validation

유효할 때

필드 값들을 입력하고, 다른 필드로 넘어 갈때 유효성을 체크 하고,
submit을 클릭하였을 때 아래와 같이 유효성을 다시 한번 체크 한다.

에러가 발생했을 경우

에러의 갯수를 팝업을 통해 알려주고,
입력 필드 오류 메시지도 입력 필드 옆에 보여준다.
또한 폼 위 아래로 메시지를 표시하여 오류가 났음을 인식 하도록 한다.

 * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
 * http://docs.jquery.com/Plugins/Validation

위의 validation 플러그인을 활용하여 만들 수 있다.

var validator = $('#bbsForm').bind('invalid-form.validate', function() {
        $("#dialog-modal > p").html('<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>')
            .append('입력 화면에 ' + validator.numberOfInvalids() + "개의 에러가 발생했습니다, 다시 입력 하세요.");
        $("#dialog-modal").dialog('open').dialog('option', 'title', '입력 필드 에러!!');
        $(".summary").html("입력 화면에 " + validator.numberOfInvalids() + "개의 에러가 발생했습니다, 다시 입력 하세요.");
    }).validate({
        errorElement: "em",
        errorContainer: $(".warning, .summary"),
        submitHandler: function(form) {
            alert($(form).attr('id'));
        },
        success: function(label) {
            label.html("&nbsp;ok!").addClass("success");
        },
        rules: {
            title: "required",
            username: {
                required: true,
                minlength: 2,
                maxlength: 10
            }
        },
        messages: {
            title: "제목을 입력 하세요!",
            username: {
                required: "username을 입력 하세요!",
                minlength: jQuery.format("{0}자 이상 입력 하세요."),
                maxlength: jQuery.format("{0}자 이상 입력 할 수 없습니다.")
            }
        }
    });

오메, 노트북 책상이 필요해!! 누워서 할려니 하다가 지쳐서 하기가 싫네 ㅋㅋㅋ