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

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>

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

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

บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

03 Jun 09 สร้างระบบ slide เลื่อนซ้าย ขวา ด้วย jquery อย่างง่าย อ่าน 2519 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 2398 04 Jun 09 สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย อ่าน 2095 04 Mar 09 ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย อ่าน 1979 15 Nov 08 สร้าง Drag and Drop วัตถุด้วย jQuery โดยไม่ใช้ plug in อย่างง่าย อ่าน 1922 04 Aug 09 การส่งข้อมูลแบบ post ด้วย ajax ของ jquery อ่าน 1905 25 Sep 08 Jquery javascript library มาแรง อ่าน 1863 14 Nov 08 สร้างป้ายโฆษณาเลื่อนตามจอภาพ ด้วย jquery ได้ในไม่กี่บรรทัด อ่าน 1860 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 1841 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 1793 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 1735 25 Sep 08 เริ่มต้นกับ jquery อ่าน 1707 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 1622 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 1603 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 1599
จำนวนผู้เยี่ยมชม 85516 คน 2010 © Copyright ninenik.com. All rights reserved.