Javascript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <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> |
ตัวอย่างผลลัพธ์
