Question

我尝试过并希望在此演示中使用成功消息（iam使用bootstrap2）

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

但是，因为iam使用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

你正在混淆回调函数。 我建议您为每个回调函数read the documentation。

errorPlacement 用于布局。当元素无效时，此回调函数会告诉 where 将元素放在表单上。在验证元素后默认为。

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

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

1 个答案: