# jQuery fieldcontain/input

###### tags: `jQuery` `JavaScript` `jQuery Mobile`

---

## Fieldcontain
<span class="code2">`<div data-role="fieldcontain"></div>`</span>
html

<!-- CONTENT -->
<div role="main" class="ui-content">
    <div data-role="fieldcontain">
        <label for="username">帳號</label>
        <input type="text" name="username" id="username" placeholder="請輸入帳號">
        <span id="username-show"></span>
    </div>
    <div data-role="fieldcontain">
        <label for="password">密碼</label>
        <input type="password" name="password" id="password" placeholder="請輸入密碼">
        <span id="password-show"></span>
    </div>
    <div data-role="fieldcontain">
        <label for="phone">電話</label>
        <input type="text" name="phone" id="phone" placeholder="電話號碼">
    </div>		
    <div data-role="fieldcontain">
        <label for="birthday">生日</label>
        <input type="date" name="birthday" id="birthday" placeholder="出生年月日">
    </div>
    <div data-role="fieldcontain">
        <label for="message">訊息</label>
        <textarea name="message" id="message" cols="30" rows="10" placeholder="請輸入相關內容">
        </textarea>
    </div>				
    <div class="ui-grid-a">
        <div class="ui-block-a"><a href="#" data-role="button" data-theme="b" id="ok-btn">確定</a></div>
        <div class="ui-block-b"><a href="#" data-role="button" data-theme="b" id="cancel-btn">取消</a></div>
    </div>
    <div class="info">
        <div id="showinfo"></div>
    </div>
</div><!-- /CONTENT -->

練習JS的監聽~.<span class="code1">bind()</span>

var flag_username = false;
var flag_password = false;

$(function(){
    $("#ok-btn").bind("click",function(){
        if(flag_username && flag_password){
            $("#showinfo").html('【資訊】' + "<br>"
            + '帳號:' + $("#username").val() + "<br>" 
            + '密碼:' + $("#password").val() + "<br>"
            + '電話:' + $("#phone").val() + "<br>"
            + '生日:' + $("#birthday").val() + "<br>"
            + '訊息:' + $("#message").val() 
            )
        }else{
            alert('您的資料有誤!');
        };
    });
    $("#username").bind("input propertychange",function(){
        if($("#username").val().length<5){
            $("#username-show").html('需大於五個字');
            $("#username-show").css("color","blue");
        }else{
            $("#username-show").html('');
            flag_username = true;
        };
    }); 
    $("#password").bind("input propertychange",function(){
        if($(this).val().length<8){
            $("#password-show").html('需大於八個字');
            $("#password-show").css("color","blue");
        }else{
            $("#password-show").html('');
            flag_password = true;
        };
    });
});

:::info
小重點提示:設定判斷式的時候，可用舉旗降旗的概念去理解布林值，舉旗才表示可以正確(true)送出喔!
:::

---
<style>
h2 {
color: #2383B8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383B8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code2 {
padding: 2px 4px;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>