Web サイトに jQuery Validation プラグインを実装しました。必須テキスト ボックスに入力せずに [送信] ボタンをクリックすると、必須フィールド メッセージが何度も表示されます。
[送信] ボタンを 3 回クリックすると、メッセージが 3 回表示されます。一度だけ表示する必要があります。
コード
$(document).ready(function()
{
$("#frm").validate(
{
rules : {
cat_name : {
required: true
},
cat_description : {
required : true
}
},
messages : {
cat_name : {
required:"<br />Please enter category name"
},
cat_description : {
required:"<br /> Please enter category description"
}
}
});
});
HTML
<table width="99%" cellspacing="6" cellpadding="3" border="0" align="right">
<form method="post" action="save_livefeed_categories.php" class="cmxform" id="frm" name="frm">
<tbody>
<tr>
<td><div align="center" class="venueError" id="venueError"></div></td>
</tr>
<input type="hidden" value="0" id="update" name="update">
<input type="hidden" value="" id="cat_id" name="cat_id">
<tr>
<td height="10" colspan="2"></td>
</tr>
<tr>
<td width="22%" height="25" bgcolor="#FFFFFF"><strong>Category Name :</strong></td>
<td width="50%" bgcolor="#FFFFFF"><input type="text" value="" id="cat_name" name="cat_name"></td>
</tr>
<tr>
<td width="22%" height="25" bgcolor="#FFFFFF"><strong>Category Description :</strong></td>
<td width="50%" bgcolor="#FFFFFF"><textarea cols="35" rows="8" id="cat_description" name="cat_description"></textarea></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="right"></td>
<td bgcolor="#FFFFFF" align="left">
<input type="image" name="Save" id="Save" src="images/bt_save.gif">
<input type="image" style="cursor:pointer" onclick="javascript:window.location.replace('livefeed_categories.php'); return false;" src="images/bt_cancel.gif">
</td>
</tr>
</tbody>
</table>
</form>
出力