mobile 로그인 완료

src/main/webapp/WEB-INF/jsp/mobile/login/login.jsp

@@ -4,79 +4,56 @@
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
 <jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
 <script type="text/javascript">
-
-function checkMobile(){
-     
-    var varUA = navigator.userAgent.toLowerCase(); //userAgent 값 얻기
- 
-    if ( varUA.indexOf('android') > -1) {
-        //안드로이드
-        return "android";
-    } else if ( varUA.indexOf("iphone") > -1||varUA.indexOf("ipad") > -1||varUA.indexOf("ipod") > -1 ) {
-        //IOS
-        return "ios";
-    } else {
-        //아이폰, 안드로이드 외
-        return "other";
-    }
-    
-}
-
 $( function(){
-    $( "#id" ).focus();
+    $( "#ex_select" ).siblings('label').text( $( "#ex_select" ).children('option:selected').text() );
+    
+    $.validator.addMethod('selectcheck', function (value) {
+        return (value != "0" );
+    }, "" );
     
     $( "#loginForm" ).validate({
-        onfocusout: function (element) {
-            $( element ).valid();
-//             $( "#msg" ).remove();
-        },
-        messages : {
+        rules : {
             id : {
-                required : "아이디를 입력해주세요."
+                required: true
             },
             pw : {
-                required : "비밀번호를 입력해주세요."
+                required: true
+            },
+            centerCode : {
+                selectcheck : true
+            }
+        },
+        errorPlacement: function( error, element ){
+            if( element.attr( "name" ) == "centerCode" ) {
+                $( "#errMsg" ).text( "생활센터를 선택해주세요" );
+            } else if( element.attr( "name" ) == "id"  ||  element.attr( "name" ) == "pw" ) {
+                if( $( "#id" ).val().length == 0 ) { 
+                    $( "#errMsg" ).text( "병동번호 입력해주세요(동+호실)" );
+                    $( "#id" ).focus();
+                } else if( $( "#pw" ).val().length == 0 ){
+                    $( "#errMsg" ).text( "생년월일 6자리를 입력해주세요." );
+                    $( "#pw" ).focus();
+                }
             }
         },
         submitHandler: function(form) {
-//             $( "#submitLoading" ).toggleClass( "d-none", false );
-//             $( "#submitBtn" ).toggleClass( "d-none", true );
-            
-            $.ajax({
-                url      : "./check",
-                data     : $("#loginForm").serialize(),
-                method   : "POST",
-                dataType : "json",
-                success  : function( data ){
-                    console.log("data -- > " + JSON.stringify(data));
-                    var resultCode = data.code;
-                    var resultMsg  = data.message;
+            getAjax( "./check", $("#loginForm").serialize(), function( data ){
+                console.log("data -- > " + JSON.stringify(data));
+                var resultCode = data.code;
+                var resultMsg  = data.message;
+                
+                if( data.code == "00" ) {
+                    console.log("checkMobile() -- > " + checkMobile());
                     
-                    if( data.code == "00" ) {
-                        console.log("checkMobile() -- > " + checkMobile());
-                        if (checkMobile() == "android") {
-                            window.android.login(data.id, data.pw);
-                        }
-                        
-                        location.href="/mobile/menu";
-                    } else {
-                    	$("#errMsg").text(resultMsg);
-//                         $( "#submitLoading" ).toggleClass( "d-none", true );
-//                         $( "#submitBtn" ).toggleClass( "d-none", false );
+                    if (checkMobile() == "android") {
+                        window.android.login(data.id, data.pw);
                     };
-                },
-                error : function(){
-//                     $("#errMsg").attr("")
-//                     $( "#submitLoading" ).toggleClass( "d-none", true );
-//                     $( "#submitBtn" ).toggleClass( "d-none", false );
-                }
-            }).done( function(){
-//                 if( $( "#saveId" ).is( ":checked" ) ) {
-//                     setCookie( "userInputId", $( "#id" ).val(), 365 );
-//                 } else {
-//                     deleteCookie( "userInputId" );
-//                 }
-            });
+                    
+                    location.href="/mobile/menu";
+                } else {
+                    $("#errMsg").text( resultMsg );
+                };
+            }, null, null );
         }
     });
 });
@@ -85,9 +62,7 @@ $( function(){
 <body>
     <div id="login">
         <div class="container">
-            <div class="title">
-                생활치료센터
-            </div>
+            <div class="title">생활치료센터</div>
             <form id="loginForm" action="./check" method="post">
                 <div class="login_box">
                     <div class="visual">
@@ -96,40 +71,33 @@ $( function(){
                     <div class="form">
                         <div class="part">
                             <div class="selectbox">
-                                <label for="ex_select">치료센터 확인</label>
-                                <select id="ex_select" name="centerCode">
+                                <label for="centerList">치료센터 선택</label>
+                                <select id="centerList" name="centerCode">
+                                    <option value="0" selected>치료센터 선택</option>
                                     <c:forEach var="i" items="${centerList}">
-                                        <option value="${i.centerCode}"><c:out value="${i.centerName}" /></option> 
+                                        <option value="${i.centerCode}"> · <c:out value="${i.centerName}" /></option> 
                                     </c:forEach>
-    <!--                                 <option selected>치료센터 확인</option> -->
-    <!--                                 <option>레몬병원</option> -->
-    <!--                                 <option>레몬병원</option> -->
-    <!--                                 <option>레몬병원</option> -->
                                 </select>
                             </div>
                         </div>
                         <div class="part">
                             <div class="input">
-                                <input type="text" id="id" name="id" class="number1" placeholder="병동번호" tabindex="1" maxlength="20" required>
+                                <input type="text" id="id" name="id" class="login-id" placeholder="병동번호" tabindex="1" maxlength="20" autocomplete="off" required>
                             </div>
                         </div>
                         <div class="part">
                             <div class="input">
-                                <input type="password" id="pw" name="pw" class="date1" placeholder="생년월일 6자리" autocomplete="off" tabindex="2" maxlength="15" required>
+                                <input type="password" id="pw" name="pw" class="login-pw" placeholder="생년월일 6자리" autocomplete="off" tabindex="2" autocomplete="off" maxlength="15" required>
                             </div>
                         </div>
                         <div class="part">
-                            <div class="alert" id="errMsg">
-<!--                                 입력하신 정보가 일치하지 않습니다. -->
-                            </div>
+                            <div class="alert" id="errMsg"></div>
                         </div>
+                        
                         <div class="part">
                             <div class="button">
                                 <!-- <button id="submitBtn">로그인</button> -->
                                 <button id="submitBtn" type="submit" class="btn btn-lg btn-primary">로그인</button>
-                                <div id="submitLoading" class="d-none align-bottom spinner-border text-primary" role="status">
-                                  <span class="sr-only">Loading...</span>
-                                </div>
                             </div>
                         </div>
                     </div>

src/main/webapp/resources/css/mobile/style.css

@@ -81,7 +81,9 @@ caption {text-align:left;}
 #login .selectbox select { width: 100%; height: 45px; line-height: 45px; font-family: inherit; padding: 0 10px; border: 0; opacity: 0; filter:alpha(opacity=0); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
 #login .input input { width: 100%; line-height: 45px; height: 40px; border: 0px; padding: 0 10px 0 30px; }
 #login .input input.number { background-image: url('../../images/mobile/login_number_icon.png'); background-position: left 5px center; background-repeat: no-repeat; }
+#login .input input.login-id { background-image: url('../../images/mobile/login_number_icon.png'); background-position: left 5px center; background-repeat: no-repeat; }
 #login .input input.date { background-image: url('../../images/mobile/login_date_icon.png'); background-position: left 5px center; background-repeat: no-repeat; }
+#login .input input.login-pw { background-image: url('../../images/mobile/login_date_icon.png'); background-position: left 5px center; background-repeat: no-repeat; }
 #login .alert { font-size: 13px; color:#D70000; margin: 10px 0px 15px 0px; }
 #login .button button { display: block; background-color: #426DDB; font-size: 15px; font-weight: 700; color:#FFFFFF; text-align: center; line-height: 50px; height: 50px; width: 100%; border-radius: 25px; }
 
@@ -349,4 +351,5 @@ input[type="radio"]:checked + label span {  background-image:url('../../images/m
 .pop_inner .btn ul li a { display: block; width: 70px; height: 30px; line-height: 30px; text-align: center; }
 .pop_inner .btn ul li a.cancle { background-color: #666666; color:#FFFFFF; }
 .pop_inner .btn ul li a.confirm { background-color: #1abc9c; color:#FFFFFf; }
-.error-box{outline:none !important;width:0 !important;height:0 !important;margin:0 !important;border:0 !important;}
+.error-box{outline:none !important;width:0 !important;height:0 !important;margin:0 !important;border:0 !important;}
+.error{color:red;}

src/main/webapp/resources/js/mobile/common.js

@@ -20,7 +20,19 @@ function getAjax( url, vv, success, error, done ){
     };
   });
 };
-
+function checkMobile(){
+    var varUA = navigator.userAgent.toLowerCase(); //userAgent 값 얻기
+    if ( varUA.indexOf('android') > -1) {
+        //안드로이드
+        return "android";
+    } else if ( varUA.indexOf("iphone") > -1||varUA.indexOf("ipad") > -1||varUA.indexOf("ipod") > -1 ) {
+        //IOS
+        return "ios";
+    } else {
+        //아이폰, 안드로이드 외
+        return "other";
+    }
+};
 
 $(document).ready(function(){
 
@@ -44,6 +56,14 @@ $(document).ready(function(){
 
       $(this).siblings('label').text(select_name);
     });
+    
+    selectTarget.click(function(){
+        
+        if( $( this ).children( "option" ).length == 1 ) {
+            var select_name = $(this).children('option:selected').text();
+            $(this).siblings('label').text(select_name);
+        }
+    });
 
      /* FAQ LIST */
     $('.faq .list li .answer').hide();