jQuery 验证成功指示器

Question

好吧，我想我错了......但我似乎无法得到答案。我只是想创建一个成功复选标记或指示符，表明用户在输入表单中输入的内容是有效的。脚本中注释掉的部分是我想要实现的想法。这是脚本:

$('document').ready(function(){
    $('form').validate({
        rules: {
           a: {required:true, minlength:2},
           b: {required:true}
        },      
        messages: {
           a: {required: "enter your name!"},
           b: {required: "enter the date!"}                        
        },
        errorPlacement: function(error, element) {
        if(element.attr('name') == 'a'){
             $('#name').html(error);                
         }
         if(element.attr('name') == 'b'){
             $('#date').html(error);                
         }
        },
        success: function(error){
            //a: {$('#name').html('nice name!');},
            //b: {$('#date').html('nice date!');}                           
        },
        debug:true
    });
    $('#a').blur(function(){
        $("form").validate().element("#a");
    });
});

这是 html:

<form action="#" id='commentForm'>
    <input type="text" name="a" id="a">
    <input type="text" name="b" id="b">
    <button type="submit">Validate!</button>
<div id="date" style="border:1px solid blue;"></div>
<div id="name" style="border:1px solid red;"></div>
</form>

最后但并非最不重要的一点是，这是 jsfiddle:

http://jsfiddle.net/mmw562/wQxQ8/8/

非常感谢您的帮助!

Answer 1

里面的部分success:可以是类名或 JavaScript 回调函数，它看起来就像任何其他函数一样。但相反，您将其编写为一系列插件选项。还有，既然叫“成功”，为什么会 error当没有任何东西时被传递进去？ As per the documentation它应该看起来像这样......

success: function(label){
    label.addClass("valid").text("Ok!");                        
},

http://docs.jquery.com/Plugins/Validation/validate#toptions

If specified, the error label is displayed to show a valid element. If a String is given, its added as a class to the label. If a Function is given, its called with the label (as a jQuery object) as its only argument. That can be used to add a text like "ok!".

这是您的 jsFiddle 稍作修改以显示基本概念。也许您可以使用复选标记作为 background-image在 .valid 的 CSS 中class .

http://jsfiddle.net/wQxQ8/12/