사용자 정보 입력하기 - 유효성검사 추가,입력폼 reset

유효성 검사를 하기위해서 소스를 추가

(기초가 중요합니다...)

-user.js
//사용자 입력
function userSubmit(){
     var params = $("#USER_insert").serialize(); // serialize() :입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.
     

 // 먼저 입력을 실행했을때 75줄에서 바꿔준 값을 그대로 가지고 있어서 초기화를 한번 해줘야함(11/02)      $("input[type='button']").attr("data-dismiss","");


// 여기를 추가 , 유효성검사
                                                                                                    
     if ($("#ENAME_user").val() == "") {
            alert("사원id를 입력하세요");
            $("#ENAME_user").focus();
        } else if ($("#ADDRESS_user").val() == "") {
            alert("자택정보를 입력하세요");
            $("#ADDRESS_user").focus();
        } else if ($("#NAME_user").val() == "") {
            alert("이름를 입력하세요");
            $("#NAME_user").focus();
        } else if ($("#DCODE_user").val() == "") {
            alert("사원번호를 입력하세요");
            $("#DCODE_user").focus();
        } else if ($("#DEPARTMENT_user").val() == "") {
            alert("부서를 입력하세요");
            $("#DEPARTMENT_user").focus();
        } else if ($("#POSITION_user").val() == "") {
            alert("직급를 입력하세요");
            $("#POSITION_user").focus();
        } else if ($("#BIRTHDAY_insert").val() == "") {
            alert("생일을 입력하세요");
            $("#BIRTHDAY_insert").focus();
        } else if ($("#BIREDAY_insert").val() == "") {
            alert("입사일 입력하세요");
            $("#BIREDAY_insert").focus();
        } else if ($("#PHONE_user").val() == "") {
            alert("전화번호를 입력하세요");
            $("#PHONE_user").focus();
        } else if ($("#EXNUM_user").val() == "") {
            alert("내선번호를 입력하세요");
            $("#EXNUM_user").focus();
        } else if ($("#EMAIL_user").val() == "") {
            alert("이메일를 입력하세요");
            $("#EMAIL_user").focus();
        } else if ($("#PRESENT_user").val() == "select") {
            alert("사원상태를 입력하세요");
            $("#PRESENT_user").focus();
        }else{
     

                                                                                                


     $.ajax({                                
            url: '/library/user.do',
            type: 'POST',
            data:params,
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
            dataType: 'html',
            success: function(){
                //alert("성공");
                $("#list2").jqGrid({  // jqGrid 리로드
                             url : '/library/gridView.do', 
                             datatype : 'json'}).trigger("reloadGrid"); 
                
                // 사용자 입력 후 form reset, 사용자입력 후 다시 입력버튼을 누르면 방금전에 입력한 폼값이
                       그대로 남아있었다. 그래서 입력 후에 폼을 reset시킴
                $("#USER_insert").each(function(){
                    this.reset();
                });
                
            },error:function(request,status,error){
              console.log("code:"+request.status+"\n"+"message:"
                      +request.responseText+"\n"+"error:"+error);
            //alert("실패");
            }
        });
    // 창을 닫기위해 속성을 변경, 여기에 위치해야 정상적으로 입력창이 잘닫힘 
     $("input[type='button']").attr("data-dismiss","modal"); 
        }
    
       
}
 
 
/* 원래는 <input type="button" id="insert" class="btn" value="입력" onclick="userSubmit()" data-dismiss="modal" >
 * 로 유효성검사를 추가하기전에는 속성을 같이 줬었다. 
 * 그런데 유효성검사를 추가하고 나니 값이 입력되지않는 곳에 포커스가 있고 창이 그래도 있어야 하는데 저 속성때문에
 * 창이 꺼져서 저렇게 나중에 추가하기로 변경
 * <input type="button" id="insert" class="btn" value="입력" onclick="userSubmit()" data-dismiss="" > 
 */
 

- userFormPopup.jsp 전

<input type="button" id="insert" class="btn" value="입력" onclick="userSubmit()"
                    data-dismiss="modal" > 

- userFormPopup.jsp후

<input type="button" id="insert" class="btn" value="입력" onclick="userSubmit()"
                    data-dismiss="" >