我做了一些修改,以便在验证时向字段创建工具提示错误消息。 无论如何,将错误类添加到字段是正常的,工具提示也可以,但是当字段有效时,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;
}