[jQuery] required 속성을 이용한 필수 입력 체크 스크립트

웹 프로그램에서 가장 많이 사용하는 스크립트가 form에서 필수 입력 부분을 체크하는 스크립트일 것이다. 아래 코드는 input 등에 지정된 required 속성을 이용해서 필수 입력을 체크하는 것이다.

jQuery(function() {
    jQuery(document).on("click", "form.ajax button:submit, form.ajax input:submit, form.ajax input:image", function(e) {
        e.preventDefault();
        e.stopPropagation();

        var f  = this.form;
        var $f = jQuery(f);
        var $b = jQuery(this);
        var $t, t;
        var result = true;

        $f.find("input, select, textarea").each(function(i) {
            $t = jQuery(this);

            if($t.prop("required")) {
                if(!jQuery.trim($t.val())) {
                    t = jQuery("label[for='"+$t.attr("id")+"']").text();
                    result = false;
                    $t.focus();
                    alert(t+" 필수 입력입니다.");
                    return false;
                }
            }
        });

        if(!result)
            return false;
    });
});

스크립트가 실행되면 입력 값이 없는 input 등에 대응되는 label 의 텍스트를 가져와서 이름 필수 입력입니다. 와 같은 형태로 경고창을 표시한다.