シナリオ：
- 「TxtName」を空のままにして送信します。次に、テキストボックスの横に赤い画像が表示されます。意図されました。
- 送信せずにテキストボックスにデータを入力すると、赤い画像が緑に変わります。意図されました。
- テキストボックスのデータをクリアし、送信しないでください。その後、緑の画像は赤に変わりませんでした。問題！
jQuery検証コードは次のとおりです。
$(document).ready(function() {
$("#BtnSubmit").click(function() {
$("Form").validate({
rules: {
<%= TxtName.UniqueID %>: { required: true }
},
messages: {
<%= TxtName.UniqueID %>: { required: "Name is required" }
},
success: function(element){
$(element).addClass("checked");
},
errorPlacement: function(error, element) {
var container = $('<div />');
container.addClass('MyTooltip');
error.insertAfter(element);
error.wrap(container);
$("<div class='errorImage'></div>").insertAfter(error);
}
});
});
});
どこ：
- 「errorImage」cssクラスは、赤い画像を表示するクラスです。
- 「チェックされた」cssクラスは、緑色の画像を表示するクラスです。
- [エラーの配置]セクションには、テキストボックスの横に画像（赤/緑）が表示されます。この画像にカーソルを合わせると、エラーメッセージのツールチップが表示されます。
あなたがそれを見る必要があるならば、これがCSSです：
div.MyTooltip {
position: relative !important;
display: inline-block;
top: 3px;
right: 0px;
}
div.MyTooltip:hover {
z-index: 1005;
}
div.MyTooltip label {
display: none !important;
vertical-align: middle;
padding: 0px;
line-height: 16px;
font-size: 11px;
}
div.MyTooltip:hover label.error:not(.checked) {
display: inline-block !important;
position: absolute;
right: 0px;
bottom: 24px;
width: 170px;
height: auto;
padding: 0px 5px 0px 5px;
background-color: #ff0000;
border-radius: 5px;
color: white;
opacity: 0.50;
text-align: center;
}
label.error + div.errorImage
{
background: url('Images/error.png') no-repeat 0px 0px;
display: inline-block !important;
width: 20px;
height: 20px;
vertical-align: middle;
}
label.checked + div.errorImage
{
background: url('Images/valid.png') no-repeat 0px 0px;
display: inline-block !important;
width: 22px;
height: 22px;
vertical-align: middle;
}
input.error, select.error {
/*border-width: 1px;*/
border-color: tomato;
}
ASP.NETHTMLは次のとおりです。
<asp:TextBox ID="TxtBranchName" runat="server" ClientIDMode="Static"></asp:TextBox>