填写完后然后清除所需的文本框，错误图像将不会变成成功图像

Question

情景：

1. 将“TxtName”留空并提交;然后，文本框旁会显示一个红色图像。意图。
2. 在文本框中填入数据不提交，然后红色图片将变为绿色。意图。
3. 清除文本框中的数据，不要提交。然后绿色图像没有变成红色。 问题！

这是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 .NET HTML是：

<asp:TextBox ID="TxtBranchName" runat="server"  ClientIDMode="Static"></asp:TextBox>

Answer 1

我现在看到了。您错误地将按钮click事件绑定到.validate()。这会导致各种奇怪的问题，因为每次单击按钮时都会重新初始化所有问题。

.validate()在DOM ready 中仅初始化 。其内置的submitHandler已经负责捕获提交按钮点击。

$(document).ready(function() {
    // $("#BtnSubmit").click(function() {  // <-- remove this line!
        $("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);
            }
        });
    // }); // <-- remove this line!
});

查看通用（因为您没有提供HTML）演示：

http://jsfiddle.net/RKSSp/

---

有关详细信息，请参阅以下内容：

https://stackoverflow.com/a/12989534/594235

https://stackoverflow.com/a/11068130/594235

https://stackoverflow.com/a/14107043/594235

https://stackoverflow.com/a/13692534/594235

https://stackoverflow.com/a/9936025/594235

https://stackoverflow.com/a/12101079/594235

https://stackoverflow.com/a/10609871/594235