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

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

bootstrap เช็คฟอร์ม

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

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

ร่วมกับ jquery

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

<!-- 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"

เช่น

<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"

ตัวอย่าง

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

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

<!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 บาท หรือ ระบุจำนวน