제이쿼리를 이용해서 입력항목의 필수 값 체크하기

프로젝트를 진행하면서 필수 값 입력 여부를 체크할 일이 생겼습니다.

물론 보통의 프로젝트라면 공통에서 validation 체크를 할 수 있게 구현해 놓았겠지만.. 안타깝게도.. 여긴 그런 부분이 부족해서

제가 따로 구현해보았습니다.

필수 입력값 체크를 위한 테이블이나 div 의 id 값을 파라미터로 넘기면 그 하위의 th, 즉 헤더 부분에 class 명칭을 essential 로 정의해서

별(*) 를 표시 하게 해놓고 헤더(th)에 별(*) 표시가 있으면 td 의 input 값에 따라 입력이 되어있는지 체크하는 로직입니다.

일단은 사용하는 부분이 text와 selectbox 만 있어서 그 두가지만 체크하게 하였습니다.

    /**

     * 입력 항목의 필수 값을 체크

     * @param argObjId : 체크할 최상위 element id

     * @returns {boolean}

     */

    fncInputSelectReqiredCheck : function(argObjId){

        var varRetBoolean = true;

        $('#'+argObjId).find('th').each(function(){

            var varThClassId = $(this).attr('class');

            if(varThClassId !== undefined && varThClassId === 'essential'){

                var varInput = $(this).next().find('input');

                if(varInput !== undefined && varInput.attr('type') === 'text'){

                    if(varInput.val().replace(/(^\s*)|(\s*$)/gi, '') === ''){

                        alert($(this).text() + '은(는) 필수 입력항목입니다.');

                        varInput.val('');

                        varInput.focus();

                        varRetBoolean = false;

                        return false;

                    }

                }

                var varSelect = $(this).next().find('select');

                if(varSelect !== undefined && varSelect.val() === ''){

                    alert($(this).text() + '은(는) 필수 입력항목입니다.');

                    varInput.focus();

                    varRetBoolean = false;

                    return false;

                }

            }

        });

        return varRetBoolean;

    }