ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery
17 November 2008Javascript 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>
ตัวอย่างผลลัพธ์
อ่าน 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
