Jquery验证成功函数没有清除重新验证的有效标签？

我有一个使用JQuery Validate插件来验证数据的表单。对于用户名字段（但不是我表格上的其他字段），如果用户名可用，我想在字段旁边显示“用户名可用”。Jquery验证成功函数没有清除重新验证的有效标签？

我有这个几乎工作。唯一有问题的是，当用户在输入有效值后编辑用户名时，以前的有效邮件永远不会被删除，所以在字段旁边显示“用户名可用的用户名”或“用户名可用的用户名可用的用户名可用“等。

当我重新验证这个字段时，需要做些什么改变才能删除以前的”用户名可用“信息？

我的jQuery的成功函数如下：

$("form").validate({ 
     success: 
      function(label) { 

       if (label.attr('for') == "username") { 
        var element = '#' + label.attr('for'); 
        label.removeClass("error").addClass("valid").text("Username available"); 
       } else { 
        label.removeClass("error"); 
       } 


     } 
    }); 

    $("#regForm").validate(); 
});

来源

2011-05-09 Jessica Brown

似乎有一对夫妇类似的插件。你能否提供某种特定插件的链接？ – Eduardo 2011-05-09 21:35:56

Edward，请参阅http://stackoverflow.com/tags/jquery-validate/info ;-) – 2011-05-10 00:25:14

我终于明白自己了。查看validate插件的源代码，如果从有效标签中删除“error”类，则标签在重新验证时不会被重用，而是会创建一个新标签。

所以我的解决方法是从我的成功函数中删除.removeClass（），并修改我的样式表的有效类以使用！important重写错误类中不同的项。

新验证功能：

$("form").validate({ 
    success: 
     function(label) { 

      if (label.attr('for') == "username") { 
       var element = '#' + label.attr('for'); 
       label.addClass("valid").text("Username available"); 
      } else { 
       label.addClass("invisiblevalid"); //ie. hide 
      } 


    } 
}); 

$("#regForm").validate();

}）;

修改的样式表的代码：

label.error { 
background: url('check.gif') no-repeat; 
color: #FF0000; 
} 
label.valid { 
background: url('check.gif') no-repeat !important; 
color: #339900 !important; 
} 
label.invisiblevalid { 
display: none !important; 
}

来源

2011-05-10 19:20:16

我建议你不要使用'！important'，这是不推荐的。一旦你使用它，你就不能在没有另一个重要的情况下改变它。正如那句老话：“如果你使用！重要，你做错了”。 – 2012-07-11 16:18:51

它是不太理想的使用！重要的是，我会同意，如果你有如何改善CSS使其工作，而不使用！的重要覆盖优先规则的破解工作，我全部耳朵 – 2012-07-12 21:28:20

我有同样的问题是，当发生'重新验证'（用户编辑字段的内容）时，标签最终会有两个类，'error'和'success'像这样：'此字段是必填项。'。那么会发生什么情况是，现在有错误的字段的标签将采用“.valid”中的样式，因为'.valid'正在使用'！important'。没有办法让插件交换'error'和'success'类，而不是在初始验证发生之后总是离开这两个类。 – 2013-02-14 20:06:37

我不知道到底是哪插件，您正在使用。但我想它应该看起来像这样。

$("form").validate({ 
    success: 
     function(label) { 

      if (label.attr('for') == "username") { 
       var element = '#' + label.attr('for'); 
       label.removeClass("error").addClass("valid").text("Username available"); 
      } else { 
       label.removeClass("error"); 
      } 


    }, 
    error: 
     function(label) { 

      if (label.attr('for') == "username") { 
       var element = '#' + label.attr('for'); 
       label.addClass("error").removeClass("valid").text("Username unavailable"); 
      } else { 
       label.addClass("error"); 
      } 


    } 
}); 

$("#regForm").validate();

来源

2011-05-09 21:39:36 Eduardo

我继续前进并尝试了您的解决方案，但它对validate插件的行为不起作用或没有任何影响，看起来像我从我在插件的文档中读到的东西所期望的那样工作。但是，无论如何感谢您尝试帮助 – 2011-05-09 21:52:26

其实我不认为你要等到形式重新验证，你应该设定成磁场本身的功能，所以当以往用户改变您删除用户名可用的消息文本但是如果你经常验证，你就不必担心这一点。

您的JavaScript看起来不错，但您需要确保使用jQuery文本正确设置了HTML，并且标签看起来不像下面这样会导致问题。

<label id="myLabel"></label>

在jQuery页面here的评论中有一个简短注释。

来源

2011-05-10 05:50:55

它最初是在失去焦点时进行验证，然后在每次按键时重新进行验证。你的解决方案实际上并没有直接解决我的问题，因为标签格式正确，但是当我开始查看生成的标签源代码以查看它们是否正确生成时，我想到了插件源代码看看这些标签是如何生成的，这引起了我注意的一面红旗：如果标签具有与其关联的“错误”类，则该标签仅被重新使用。感谢您在寻找工作解决方案方面的帮助，我现在已经创建了工作代码！ – 2011-05-10 19:25:53

我找到了解决办法。

基本上，如果您的CSS没有更新后添加您的类有效，这是类规则没有被覆盖。为什么？问题不在于JavaScript方面，而在于您的CSS。您的有效类必须的Error类后声明....

我花了2小时寻找关于JS的问题，但它是在CSS ....哎呀....

来源

2013-03-03 00:12:09 momo

Jquery验证成功函数没有清除重新验证的有效标签？

回答

相关问题