LifeCenter/src/main/webapp/WEB-INF/jsp/mobile/health/health1.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
<script type="text/javascript" src="/resources/js/mobile/health.js"></script>
<script>
$.validator.addMethod( "rangeTemperature",  function( value, element ) {
    var result = true;
    if( value > 50 || value < 20 ) {
        result = false;
    }
    return this.optional(element) || result;
}, '<spring:message code="health.alert.bodyTemp" />' );

$( function(){
    $( "#healthForm" ).validate({
        rules : {
            temperature : {
                floatNum : true,
                floatNumOne : true,
                rangeTemperature : true
            }
        },
        focusInvalid: false,
        messages : {
            temperature : {
                floatNum : '<spring:message code="health.alert.numberFormat" />'
            }
        },
        onkeyup: function( element, event ) {
//             $( "div.error-msg" ).text( "" );
//             $( element ).valid();
        },
        onfocusout: function (element) {
//             $( "div.error-msg" ).text( "" );
            $( element ).valid();
            $( "div.error-msg" ).focus();
        },
        errorPlacement: function(error, element) {
        	console.log( error );
            $( "div.error-msg" ).text("").append( error );
            $( "div.error-msg" ).focus();
        },
        submitHandler: function(form) {
            var temperature = $.trim( $( "input[name='temperature']" ).val() );
            var flag = true;
            
            if( temperature.length == 0 ) {
                document.body.scrollTop = document.body.scrollHeight;
                $( "div.error-msg" ).empty().text( '<spring:message code="health.enter.temperature" />' );
                flag = false;
            }
            
            if( flag ){
                $( "#phrValue" ).val( temperature );
                $( "button[type='submit'].confirm" ).prop( "disabled", true ).css("background", "#DBDBDB");
                form.submit();
            }
            
            $( "div.error-msg" ).focus();
            scrollDown();
        }
    });

//     if( isMobile() ){
//         if( checkDevice() == "ios" ) {
//             $("#bluetoothBtn").hide();
//         }
//     } else {
//         alert("App에서만 사용가능한 기능입니다.");
//     }

    // $( "input[name='temperature']" ).click( function(){
    //   document.body.scrollTop = document.body.scrollHeight;
    // });

});

/*
 * 블루투스 기기연동 이벤트 처리를 위한 변수 정의
 * 공통 이벤트 처리는 -> health.js
 */
var phrLocalStorageName = "bluetoothHealth1";
var phrCallBackType     = "thermometer";
</script>
<style>
/* Rounded sliders */
.slider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ccc;  -webkit-transition: .4s;  transition: .4s;}
.slider:before {  position: absolute;  content: "";  height: 26px;  width: 26px;  left: 4px;  bottom: 4px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;}
input:checked + .slider {  background-color: #2196F3;}
input:focus + .slider {  box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {  -webkit-transform: translateX(26px);  -ms-transform: translateX(26px);  transform: translateX(26px);}
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}
div.bluetooth{font-size:18px;font-weight:600;padding:20px 0;border-bottom:1px solid #dddddd;text-align:center;}
div.bluetooth .switch {position: relative;display: inline-block;width: 60px;height: 34px;margin:0 10px;}
div.bluetooth .switch input {opacity: 0;width: 0;height: 0;}
div.bluetooth span.insert-type{cursor:pointer;vertical-align:middle;font-weight:600;}
div.bluetooth span.readonly{color:#999999;font-weight:500;}
.examination .history {text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    margin-top: 15px;}
.examination .history a {padding: 10px 15px}
.error-msg{padding:5px;outline:none;}
</style>
</head>
<body>
    <div id="sub">
        <div class="container">
            <div class="header">
                <div class="previous">
                    <a href="/mobile/menu"><spring:message code="header.previous" /></a>
                </div>
                <div class="title"><spring:message code="title.healthRecord" /></div>
            </div>
            <div class="device_tab">
                <ul>
                    <li>
                        <a href="./1" class="one active" title="체온 (body temperature)">
                          <span aria-hidden="true"><spring:message code="health.tab.bodyTemp" /></span>
                          <!-- <span class="eng" aria-hidden="true">body temperature</span> -->
                        </a>
                    </li>
                    <li>
                        <a href="./2" class="two" title="혈압/맥박수 (blood pressure/heart rate)">
                          <span aria-hidden="true"><spring:message code="health.tab.bloodPh" /></span>
                          <!-- <span class="eng" aria-hidden="true">blood pressure/heart rate</span> -->
                        </a>
                    </li>
                    <li>
                        <a href="./3" class="three" title="산소포화도 (oxygen)">
                          <span aria-hidden="true"><spring:message code="health.tab.oxygen" />
                          <!-- </span><span class="eng" aria-hidden="true">oxygen</span> -->
                        </a>
                    </li>
                    <li>
                        <a href="./4" class="four" title="혈당 (blood sugar)">
                          <span aria-hidden="true"><spring:message code="health.tab.bloodSugar" /></span>
                          <!-- <span class="eng" aria-hidden="true">blood sugar</span> -->
                        </a>
                    </li>
                    <li>
                        <a href="./5" class="five" title="임상증상 (symptom)">
                          <span aria-hidden="true"><spring:message code="health.tab.symptom" /></span>
                          <!-- <span class="eng" aria-hidden="true">symptom</span> -->
                        </a>
                    </li>
                    <li>
                        <a href="./6" class="six" title="정신건강 (mental health)">
                          <span aria-hidden="true"><spring:message code="health.tab.mental" /></span>
                          <!-- <span class="eng" aria-hidden="true">mental health</span> -->
                        </a>
                    </li>
                </ul>
            </div>
            <div id="bluetoothBtn" class="examination">
                <div class="history">
                    <a href="javascript:;" onclick="phrValue( 'getPhrValue', phrCallBackType );"><spring:message code="health.bluetooth" /></a>
                </div>
            </div>
            
<!--             <div class="bluetooth"> -->
<!--                 <span class="insert-type direct">직접입력</span> -->
<!--                 <label class="switch"> -->
<!--                   <input type="checkbox" class="checkbt" id="bluetooth-checkbox"> -->
<!--                   <span class="slider round"></span> -->
<!--                 </label> -->
<!--                 <span class="insert-type device">기기연동</span> -->
<!--             </div> -->
            <form id="healthForm" method="post" action="./insert">
                <div class="health">
                    <div class="part">
                        <div class="title"><spring:message code="health.date" /></div>
                        <div class="input day">
<!--                             <a href="javascript:;" data-popup-open="popup-calendar">d</a> -->
                            <input type="text" class="datePicker form-control" readonly>
                        </div>
                    </div>
                    <div class="part">
                        <div class="title"><spring:message code="health.time" /></div>
                        <div class="input time">
<!--                             <a href="javascript:;" data-popup-open="popup-time">d</a> -->
                            <input type="text" class="timePicker" readonly>
                        </div>
                    </div>
                    
                    <div class="part tac mt30">
                        <div class="title"><spring:message code="health.enter.temperature" /></div>
                        <!-- <div class="title">(Please enter your body temperature)</div> -->
                        <div class="input time">
                        </div>
                    </div>
                    
                    <div class="data unlink">
                        <div class="point">
                            <input type="number" class="" name="temperature" placeholder="--"> ℃
                        </div>
                    </div>
                    
                    <div class="error-msg tac mt20 error" tabindex="0"></div>
                </div>
                
                <div class="btn_group">
                    <ul>
                        <li>
                            <input type="hidden" name="phrType" value="temperature">
                            <input type="hidden" id="phrValue" name="phrValue" value="">
                            
                            <button type="submit" class="confirm" onclick='$( "div.error-msg" ).empty();'><span class="check"><spring:message code="health.submit" /></span></button>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</body>
</html>