将自定义错误放置与成功相结合不起作用jquery validate plugin

Question

我试过并希望在此演示中带来成功消息(iam使用bootstrap2)

http://alittlecode.com/files/jQuery-Validate-Demo/index.html

但是,因为我使用errorPlacement函数来放置我的错误消息

               errorPlacement: function (error, element) {
    $(element).closest('.control-group').find('.help-block').html(error.text());
    },  

和这样的Html,

        <div class="controls">
        <input autocomplete="off" type="text" class="input" name="user_login" placeholder="User Name"/>
        <span class="fillimg"> </span>

    </div>
    <span class="help-block"></span> 

    </div>

我的成功就是这样,

            errorPlacement: function (error, element) {
    $(element).closest('.control-group').find('.help-block').html(error.text());
},

            highlight: function(element) {
     $(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {

    $(element).closest('.control-group').find('.fillimg').addClass('valid');        
   $(element).closest('.control-group').removeClass('error').addClass('success');
}

和CSS

           label.valid {
            width: 16px;
            height: 16px;
            background: url('/assets/img/admin/valid.png') center center no-repeat;
            display: inline-block;
            text-indent: -9999px;
           }
           label.error {
           font-weight: bold;
           color: red;
           padding: 2px 8px;
           margin-top: 2px;
          }

当我删除errorPlacement功能时,成功内部的功能正在工作.但是,使用errorPlacement会阻止成功函数将成功类添加到.control-group.请建议.

Answer 1

你正在混淆回调函数. 我建议你阅读每个回调函数的文档.

errorPlacement用于布局.当一个元素是无效的,这个回调函数告诉那里的元素在窗体上放置.默认值是在验证元素之后.

success用于控制label元素何时有效.换句话说,默认情况下,label元素有效时没有,因此通过使用此回调,您可以生成一个.通常,人们会使用它在有效元素旁边放置一个图标,例如复选标记.

highlight 只要存在验证错误就会触发它,并且它用于切换正在测试的元素上的默认错误和有效类.

unhighlight每当纠正验证错误时触发它,它用于切换正在测试的元素的默认错误和有效类. 它highlight与安装完全相反,并且应该在安装时highlight安装.

您的大部分问题是您尝试使用success代替unhighlight回调函数.你的success函数的第二行绝对属于unhighlight.

highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
},
unhighlight: function(element) {
    $(element).closest('.control-group').removeClass('error').addClass('success');
},
success: function(element) {  
    $(element).closest('.control-group').find('.fillimg').addClass('valid');       
},
errorPlacement: function (error, element) {
    $(element).closest('.control-group').find('.help-block').html(error.text());
}

您创建的另一个潜在问题是插件不知道如何删除错误消息,因为您已手动从错误对象中提取文本并将其放在您自己的元素中.使用success,你必须再手动删除或者如果你想在错误消息中消失隐藏此元素.

success: function(element) {  
    $(element).closest('.control-group').find('.fillimg').addClass('valid');
    $(element).closest('.control-group').find('.help-block').html('');
    // or maybe this
    // $(element).closest('.control-group').find('.help-block').hide(); 
    // but you'll need a ".show()" at the end of your line in "errorPlacement"    
},