ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery
เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdeejquery form
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery form
คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน
หรือไม่สามารถใช้งานได้แล้ว
ลองดูที่ใหม่กว่า http://www.ninenik.com/content.php?arti_id=579 เป็นแนวทางแทน
ลองดูที่ใหม่กว่า http://www.ninenik.com/content.php?arti_id=579 เป็นแนวทางแทน
ไปที่ Copy
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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()