jquery - 将自定义错误放置与成功相结合不起作用 jquery 验证插件

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 功能时， success 内部的功能正在工作。但是，使用 errorPlacement 会阻止 success 函数将 success 类添加到 .control-group 中。请提出建议。

Answer 1

您混淆了回调函数。 我建议您read the documentation对于每个回调函数。

<小时/>

errorPlacement 用于布局。当元素无效时，此回调函数会告诉在表单上的何处放置该元素。默认值是在被验证的元素之后。

<小时/>

success 用于控制元素有效时的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: 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"    
},