ตรวจสอบฟอร์ม form ก่อน submit ง่ายๆ ด้วย bootstrap css

22 November 2014 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

bootstrap เช็คฟอร์ม

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ bootstrap เช็คฟอร์ม

ดูแล้ว 35,086 ครั้ง

ตัวอย่างเทคนิคการตรวจสอบฟอร์มนี้ จะใช้ความสามารถของ bootstrap css

ร่วมกับ jquery

ต้องมีการเรียกใช้งาน ไฟล์ css bootstrap โหลดมาใช้หรือ เรียกผ่าน Bootstrap CDN

1 2	`<!-- Latest compiled and minified CSS -->` `<link` `rel="stylesheet"` `href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">`

วิธีการคือ ทุกๆ แท็ก html ของฟอร์มที่เราต้องการตรวจสอบค่า

จะกำหนด คลาส ชื่อ "form-control css-require"

เช่น

1	`<input` `class="form-control css-require"` `name="name"` `type="text"` `id="name"` `/>`

โดยจะมีแท็ก div คลาส "form-group has-feedback" คลุมด้านนอกอีกที และกำหนดความกว้างของ

ข้อมูลที่ต้องการด้วย style="width:250px;" รวมทั้งมีรูปแบบ การใช้งาน icon แสดงเตือนเป็นแท็ก

span คลาส "glyphicon form-control-feedback" อยู่ต่อถัดจาก class ชื่อ "form-control css-require"

ตัวอย่าง

<div class="form-group has-feedback" style="width:250px;">
      <input class="form-control css-require" name="name" type="text" id="name"  />
      <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>

ยกเว้นกรณีที่ใช้กับ radio และ checkbox จะคลุมด้วย div ที่ใช้คลาส "form-control css-require"

ตัวอย่าง

<div class="form-group has-feedback" style="width:200px;">     
    <div class="form-control css-require">
    <label><input name="sex" type="radio" value="ชาย"  /> ชาย</label>
    &nbsp;
    <label><input name="sex" type="radio" value="หญิง" /> หญิง</label>
    </div>
    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>

ดังนั้นเวลานำไปใช้ ให้ดูรูปแบบจากโค้ดตัวอย่างด้านล่าง

โดยหากไม่ต้องการเช็คหรือตรวจสอบในส่วนไหน ให้ตัด คลาส css-require ออก

เหลือไว้เพียง "form-control"

ตัวอย่าง

ชื่อ นามสกุล
อีเมลล์
เพศ	ชาย หญิง
ความสนใจ	การออกกำลังกาย อ่านหนังสือ
ที่อยู่
จังหวัด
รหัสไปรษณีย์

โค้ดตัวอย่าง

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">-->
    <style type="text/css">
        .form-group{ margin-bottom:0px !important;}
        .form-control-feedback{top:0px !important;}
    </style>
</head>
<body>
     
     
 
 <br>  
    <div style="margin:auto;width:80%;">  
<form class="form" id="myform1" name="form1" method="post" action="" >
  <table class="table" width="100%" border="0" cellspacing="3" cellpadding="0">
    <tr>
      <td width="25%" align="right">ชื่อ นามสกุล </td>
      <td align="left">
       
<div class="form-group has-feedback" style="width:250px;">
      <input class="form-control css-require" name="name" type="text" id="name"  />
      <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>      
      
      </td>
    </tr>
    <tr>
      <td align="right">อีเมลล์</td>
      <td align="left">
 
<div class="form-group has-feedback" style="width:250px;">
      <input class="form-control css-require" name="email" type="text" id="email" />
      <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>                  
       
       
      </td>
    </tr>
    <tr>
      <td align="right">เพศ</td>
      <td align="left">
       
<div class="form-group has-feedback" style="width:200px;">     
    <div class="form-control css-require">
    <label><input name="sex" type="radio" value="ชาย"  /> ชาย</label>
    &nbsp;
    <label><input name="sex" type="radio" value="หญิง" /> หญิง</label>
    </div>
    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>    
            
      </td>
    </tr>
    <tr>
      <td align="right">ความสนใจ</td>
      <td align="left">
       
<div class="form-group has-feedback" style="width:200px;">     
    <div class="form-control css-require" style="height:100px;">
    <label><input name="like1" type="checkbox" value="การออกกำลังกาย"  /> การออกกำลังกาย</label>
    &nbsp;
    <label><input name="like2" type="checkbox" value="การอ่าน" /> อ่านหนังสือ</label>
    </div>
    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>    
            
      </td>
    </tr>    
    <tr>
      <td align="right">ที่อยู่</td>
      <td align="left">
       
<div class="form-group  has-feedback" style="width:350px;">      
      <textarea class="form-control css-require" name="address" cols="50" rows="4" id="address"></textarea>
      <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>              
       
      </td>
    </tr>
    <tr>
      <td align="right">จังหวัด</td>
      <td align="left">
 
<div class="form-group has-feedback" style="width:250px;">      
       <select class="form-control css-require" name="province" id="province" >
        <option value="">เลือกจังหวัด</option>
        <option value="กรุงเทพ">กรุงเทพ</option>
      </select>
</div>                           
       
      </td>
    </tr>
    <tr>
      <td align="right">รหัสไปรษณีย์</td>
      <td align="left">
 
<div class="form-group has-feedback" style="width:150px;">      
    <input class="form-control  css-require" name="zipcode" type="text" id="zipcode"  />
    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>               
       
       
      </td>
    </tr>
    <tr>
      <td align="right"> </td>
      <td align="left"><input type="submit" class="btn btn-primary" name="Submit" value="Submit" /></td>
    </tr>
    <tr>
      <td> </td>
      <td align="left"> </td>
    </tr>
  </table>
</form>
    
    </div>
     
     
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
 <script type="text/javascript">
 $(function(){
      
     var obj_check=$(".css-require");
     $("#myform1").on("submit",function(){
         obj_check.each(function(i,k){
             var status_check=0;
             if(obj_check.eq(i).find(":radio").length>0 || obj_check.eq(i).find(":checkbox").length>0){
                 status_check=(obj_check.eq(i).find(":checked").length==0)?0:1;    
             }else{
                 status_check=($.trim(obj_check.eq(i).val())=="")?0:1;
             }
             formCheckStatus($(this),status_check);      
         });
         if($(this).find(".has-error").length>0){
              return false;
         }
     });
      
     obj_check.on("change",function(){
         var status_check=0;
         if($(this).find(":radio").length>0 || $(this).find(":checkbox").length>0){
             status_check=($(this).find(":checked").length==0)?0:1;    
         }else{
             status_check=($.trim($(this).val())=="")?0:1;
         }
         formCheckStatus($(this),status_check);       
     });
      
     var formCheckStatus = function(obj,status){
         if(status==1){
             obj.parent(".form-group").removeClass("has-error").addClass("has-success");
             obj.next(".glyphicon").removeClass("glyphicon-warning-sign").addClass("glyphicon-ok");    
         }else{
             obj.parent(".form-group").removeClass("has-success").addClass("has-error");
             obj.next(".glyphicon").removeClass("glyphicon-ok").addClass("glyphicon-warning-sign");      
         }
     }
 
 });
</script>   
</body>
</html>

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

Tags:: bootstrap เช็คฟอร์ม

URL สำหรับอ้างอิง

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน