将自定义错误放置与成功相结合无法使用jquery验证插件

我尝试并希望像本演示一样带来成功消息（iam使用bootstrap2）

        <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>

        <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>

但是，由于iam使用errorPlacement函数将我的错误消息像这样放置在

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

        <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>

像这样的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>

和CSS

        <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>

           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功能时，success中的功能正在运行。但是，使用errorPlacement会阻止success功能将success类添加到.control组。请建议。

您把回调函数弄混了我建议您对每个回调函数都进行优化。

        <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

用于布局。当一个元素无效时，这个回调函数会告诉在表单上放置该元素的位置。默认值是在验证元素之后

        <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>

---

success

用于在元素有效时控制

标签。换句话说，默认情况下，当元素有效时，没有
标签
，因此通过使用此回调，可以生成一个标签。通常，人们会使用它在有效元素旁边放置图标，如复选标记

        <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>


高亮显示在出现验证错误时触发，用于切换被测试元素上的默认错误和有效类

        <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>


取消高亮显示在验证错误纠正时触发，用于切换被测试元素上的默认错误和有效类它与
突出显示
完全相反，应该在安装
突出显示
时安装。

        <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>


您的主要问题是试图使用
success
来代替
unhighlight
回调函数。
success
函数的第二行肯定属于
unhighlight
内部

        <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>

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
，如果希望错误消息消失，则必须手动删除或隐藏此元素

        <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>

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"    
},

非常感谢你花时间回答这个问题。你是最棒的：）我希望我能投两次赞成票。比文档要好（没有说明何时调用每个函数）。