将自定义错误放置与成功结合起来不起作用jquery validate插件 [英] combining custom error placement with success is not working jquery validate plugin

问题描述

我试图并希望像本演示中一样带出成功消息(例如，使用bootstrap2)

I tried and want to bring the success message as in this demo (iam using bootstrap2)

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

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

However, since iam using errorPlacement function for placing my error messages like this in

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

和这样的HTML，

and Html like this,

        <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.请提出建议.

when i am removing errorPlacement functionality the functionality inside success is working .However, using errorPlacement prevents the success function from adding success class to the .control-group. Please suggest.

推荐答案

您正在混合使用回调函数. 我建议您阅读每个回调函数的文档.

You're mixing up the callback functions. I suggest that you read the documentation for each callback function.

errorPlacement 用于布局.当元素无效时，此回调函数将告诉其中将元素放置在表单上.默认值为之后的要验证的元素.

errorPlacement is used for layout. When an element is invalid, this callback function tells where to place the element on the form. The default is after the element being validated.

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

success is used to control the label when the element is valid. In other words, by default, there is no label when the element is valid, so by using this callback, you can generate one. Typically, people will use this for placing a icon next to valid elements, like a check-mark.

highlight ，它用于在被测试元素上切换默认错误和有效类.

highlight is triggered whenever there is a validation error and it's used for toggling the default error and valid classes on the element being tested.

unhighlight ，它用于在被测试元素上切换默认错误和有效类. 与highlight完全相反，应在安装highlight时安装.

unhighlight is triggered whenever the validation error is corrected and it's used for toggling the default error and valid classes on the element being tested. It's the exact opposite of highlight and should be installed whenever highlight is installed.

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

The bulk of your problem is that you're trying to use success in place of the unhighlight callback function. The second line of your success function definitely belongs inside of 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手动删除或隐藏此元素.

Another potential problem you're created is that the plugin will not know how to remove the error message, because you've manually extracted the text from the error object and placed it inside your own element. Using success, you'll have to then manually remove or hide this element if you want the error message to go away.

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插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！