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

如果指定，则显示错误标签以显示有效元素。如果给出一个String，它作为一个类添加到标签中。如果函数是给定，它以标签（作为jQuery对象）作为唯一调用论点。这可以用来添加像“ok！”这样的文本。

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

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

Answer 2

这是一个可能的解决方案：

$('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(label) {
            var parentId = $(label).parent().attr("id");
            switch(parentId) {
                case "name":
                    $(label).html("nice name");
                    break;
                case "date":
                    $(label).html("nice date");
                    break;
            }                    
        },
        debug:true
    });
    $('#a').blur(function(){
        $("form").validate().element("#a");
    });
});

更新了小提琴：http://jsfiddle.net/wQxQ8/13/

Answer 3

要回答标题，不是您的实际问题：

这是检查特定输入的JQuery验证是成功还是失败的方法，它返回true / false布尔值：

$("[name='ConfirmCode']").valid(); // RETURNS true/false

示例：

if (!$("[name='ConfirmCode']").valid())
   return;

要检查整个表单的验证状态，请使用：

$('form').valid(); // RETURNS true/false

要将隐藏的输入包括在验证过程结果中：

$('form').validate({
   ignore: []
});

jQuery验证成功指标

3 个答案: