ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
jquery form

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





Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
function chk_form(){
	$(":input + span.require").remove();
	$(":input").each(function(){
		$(this).each(function(){	
			if($(this).val()==""){
				$(this).after("<span class=require>« จำเป็นต้องกรอก</span>");
			}
		});
	});
	if($(":input").next().is(".require")==false){
		return true;
	}else{
		return false;
	}
}
</script>

CSS และ HTML Code

<style type="text/css">
.require{
	height:20px;
	color:#FF0000;
	padding-left:5px;
	padding-right:5px;
	font-size:12px;
	line-height:15px;
	width:100px;
	float:none;
}
</style>
<form id="form1" name="form1" method="post" action="" onsubmit="return chk_form()">
  <table width="100%" border="0" cellspacing="3" cellpadding="0">
    <tr>
      <td width="17%" align="right">ชื่อ นามสกุล </td>
      <td width="83%" align="left"><input name="name" type="text" id="name" /></td>
    </tr>
    <tr>
      <td align="right">อีเมลล์</td>
      <td align="left"><input name="email" type="text" id="email" /></td>
    </tr>
    <tr>
      <td align="right">เพศ</td>
      <td align="left"><input name="sex" type="radio" value="ชาย" checked="checked" />
        ชาย
          <input name="sex" type="radio" value="หญิง" />
      หญิง</td>
    </tr>
    <tr>
      <td align="right">ที่อยู่</td>
      <td align="left"><textarea name="address" rows="4" id="address"></textarea></td>
    </tr>
    <tr>
      <td align="right">จังหวัด</td>
      <td align="left"><select name="province" id="province">
        <option value="">เลือกจังหวัด</option>
        <option value="กรุงเทพ">กรุงเทพ</option>
      </select>
      </td>
    </tr>
    <tr>
      <td align="right">รหัสไปรษณีย์</td>
      <td align="left"><input name="zipcode" type="text" id="zipcode" /></td>
    </tr>
    <tr>
      <td align="right"> </td>
      <td align="left"><input type="submit" name="Submit" value="Submit" /></td>
    </tr>
    <tr>
      <td> </td>
      <td align="left"> </td>
    </tr>
  </table>
</form>

ตัวอย่างผลลัพธ์

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


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





Tags:: jquery form







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ