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

17 November 2008

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

04 Aug 09 การส่งข้อมูลแบบ post ด้วย ajax ของ jquery อ่าน 8921 09 Aug 10 ประยุกต์ jQuery UI ปฏิทิน Datepicker แสดงภาษาไทย และใช้ ปี พ.ศ. อ่าน 8697 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7873 21 Apr 10 สร้างเส้นทาง เพื่อ หาระยะทาง ใน google map ด้วย jQuery อ่าน 7431 15 Nov 08 สร้าง Drag and Drop วัตถุด้วย jQuery โดยไม่ใช้ plug in อย่างง่าย มีการอัพเดท อ่าน 6993 04 Jun 09 สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย อ่าน 6958 04 Mar 09 ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย อ่าน 6889 14 Nov 08 สร้างป้ายโฆษณาเลื่อนตามจอภาพ ด้วย jquery ได้ในไม่กี่บรรทัด อ่าน 6854 29 Mar 10 สร้างฟอร์ม ดึง พิกัด ค่า latitude และ longitude จาก google map อ่าน 6660 09 Sep 10 Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude อ่าน 6455 25 Sep 08 Jquery javascript library มาแรง อ่าน 6384 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 6166 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 6022 10 Sep 10 ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่ อ่าน 5751 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 5624

บทความคนเข้าอ่านวันนี้

25 Sep 08 ทบทวนคำสั่ง sql อ่าน 9148 25 Oct 08 ส่งอีเมลล์พร้อมกับแนบไฟล์ด้วย php mail function ได้อย่างง่าย อ่าน 5244 26 Mar 09 ฟังก์ชัน php แบ่งหน้าแต่งด้วย css อ่าน 6006 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 4087 15 Oct 08 สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์ อ่าน 2663 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 3641 02 Nov 10 แนะนำ และการใช้งาน jQuery Colorpicker Plugin การเลือกค่าสี อ่าน 1450 18 Aug 10 ใช้ php ดึงรูปภาพ จากโฟลเดอร์ มาแสดง พร้อม เทคนิค แบ่งหน้า อ่าน 4561 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3126 07 Oct 10 การใช้ php sdk เรียกใช้งาน graph api ใน facebook แบบระบุส่วนของข้อมูล อ่าน 2167 25 Sep 08 สร้างฟังก์ชันในการหาจำนวนวัน ชั่วโมง นาที และวินาทีที่ผ่านมาแล้ว อ่าน 1989 06 Jan 09 สร้างฟังก์ชัน javascript เช็ค check email อย่างง่าย อ่าน 5760 25 Sep 08 การสร้างวันเวลาปัจจุบัน ด้วยฟังก์ชัน date() อ่าน 5183 26 Dec 10 แนะนำ PHP Simple HTML DOM Parser สำหรับ ดึงข้อมูล เฉพาะส่วนที่ต้องการ อ่าน 2775 25 Sep 08 เลือกหรือไม่เลือก checkbox ทั้งหมด อ่าน 3841 19 Apr 10 สอน jQuery เพิ่มรูปภาพ ให้ตัวเลือก ใน listbox อ่าน 4544 25 Sep 08 ตรวจสอบสถานะของ MySQL ด้วย phpinfo อ่าน 1790 26 Oct 08 การสร้างปุ่มยืนยันให้กับ ลิ้งค์ ด้วย function return confirm() อ่าน 3821 10 May 10 แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย อ่าน 3253 19 Feb 10 สร้าง Horizontal Accordion แนวนอน ด้วย jQuery อย่างง่าย อ่าน 3480
จำนวนผู้เยี่ยมชม 784651
คน 2012 © Copyright ninenik.com. All rights reserved.