jquery - 错误图像不会变成成功图像，填充后清除所需的文本框

Question

场景：

将“TxtName”留空并提交；然后，文本框旁边将显示一个红色图像。故意的。
在没有 submit的情况下用数据填充文本框，然后红色图像将变为绿色。故意的。
清除文本框中的数据，不要提交。然后绿色图像没有变成红色。问题！

这是 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 类是显示红色图像的类。
“checked”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>

score 0 · Accepted Answer

我现在看到了。您错误地将按钮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