Bootstrap jQuery验证twitter工具提示和removeClass

时间:2014-04-23 10:33:26

标签: javascript jquery css twitter-bootstrap

我做了一些修改,以便在验证时向字段创建工具提示错误消息。 无论如何,将错误类添加到字段是正常的,工具提示也可以,但是当字段有效时,removeClass不起作用。

按下验证按钮后:确定 http://imageshack.com/a/img841/9012/iljb.png

但是在填充第一个字段后,按下VALIDATE按钮,工具提示消失了,这没关系,但是类没有删除(这个红色框阴影:) http://imageshack.com/a/img842/5484/ru2i.png

我的剧本我不想编辑:

<script>
    $("#triggerForm").validate({
        debug: false,
        rules: {
            login: {required: true},
            password: {required: true, minlength: 5}
        },
        messages: {
            login: "To pole nie może być puste.",
            password: "To pole nie może być puste."
        }

    });


</script>

这是我要纠正的代码:

(function($) {
$.extend(true,$.validator, {
    prototype:{
        defaultShowErrors: function() {
            var self=this;
            $.each( this.successList, function(index, value) {
                $(value.element).removeClass("error").addClass("success");
                $(value).tooltip('destroy');
            });
            $.each( this.errorList, function(index, value) {
                $(value.element).removeClass("success").addClass("error");
                $(value.element).tooltip('destroy').tooltip(self.apply_tooltip_options(value.element,value.message)).tooltip('show');
            });
        },
        apply_tooltip_options: function(element, message){
            var options={
                /* Using Twitter Bootstrap Defaults if no settings are given */
                animation: $(element).data('animation')||true,
                html: $(element).data('html')||false,
                placement: $(element).data('placement')||'top',
                selector: $(element).data('animation')||true,
                title: $(element).attr('title')||message,
                trigger: $.trim('manual '+($(element).data('trigger')||'')),
                delay: $(element).data('delay')||0,
                container: $(element).data('container')||false
            };
            if(this.settings.tooltip_options&&this.settings.tooltip_options[element.name]){
                $.extend(options,this.settings.tooltip_options[element.name]);
            }
            return options;
        }
    }
});}(jQuery));

AND CSS:

.error {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: 0px 0px 2px 0px #F00;
}
.error:focus {
    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
    box-shadow: 0px 0px 2px 2px #F00;
}
.success {
    border-color: #28a900;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: 0px 0px 2px 0px #0F0;
}
.success:focus {
    border-color: #28a900;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #21ce01;
    box-shadow: 0px 0px 2px 2px #0F0;
}

0 个答案:

没有答案