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>
ตัวอย่างผลลัพธ์