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