PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

17 November 2008 By
form jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ form 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>

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

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






Tags:: jquery form






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง