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

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

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

ดูแล้ว 41,650 ครั้ง




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 สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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