我正在使用jQuery Validation插件,并希望禁用它创建的元素/容器以显示错误“消息”。
基本上,我希望带错误的input元素具有错误类,但不要创建包含错误消息的附加元素。
这可能吗?
我刚刚想到了一个CSS解决方法,但它并没有真正解决这个元素仍然被创建的事实?
<style>
label.simpleValidationError {display: none !important; }
</style>
答案 0 :(得分:71)
将Validator errorPlacement选项与空函数一起使用:
$("selector").validate({ errorPlacement: function(error, element) {} });
这有效地将错误消息放在一边。
答案 1 :(得分:6)
您也可以使用此代码:
jQuery.validator.messages.required = "";
$("selector").validate();
答案 2 :(得分:5)
您可以将showErrors选项设置为仅执行元素突出显示的函数:
$("selector").validate({
showErrors: function() {
if (this.settings.highlight) {
for (var i = 0; this.errorList[i]; ++i) {
this.settings.highlight.call(this, this.errorList[i].element,
this.settings.errorClass, this.settings.validClass);
}
}
if (this.settings.unhighlight) {
for (var i = 0, elements = this.validElements(); elements[i]; ++i) {
this.settings.unhighlight.call(this, elements[i],
this.settings.errorClass, this.settings.validClass);
}
}
}
});
但是,这很大程度上依赖于验证插件的内部结构,所以它可能不安全。最好的方法是让插件以与defaultHighlightElements()
相同的方式公开defaultShowErrors()
方法,但事实并非如此。
答案 3 :(得分:3)
我还想隐藏错误消息,并在出错时将我的input
字段和textarea
变为红色。
这是一个小例子:
以及jsfiddle断开时完全正常工作的代码;)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript' src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<style type='text/css'>
.error {
border: 1px solid red;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$( "#email_form" ).validate({
rules: {
email: {
required: true,
email: true
}
}, highlight: function(input) {
$(input).addClass('error');
},
errorPlacement: function(error, element){}
});
});//]]>
</script>
</head>
<body>
<form name="form" id="email_form" method="post" action="#">
<div class="item" style="clear:left;">
<label>E Mail *</label>
<input id="femail" name="email" type="text">
</div>
Type invalid email and press Tab key
</form>
</body>
</html>
答案 4 :(得分:2)
我也有同样的问题。我不想要错误消息,只需要注意表单输入的亮点。
消息像<?php $msj='""';?>
一样是空的,但仍然在标签后创建了错误元素/容器..
因此,为了快速阻止这种情况的发生,我编辑了jquery.validate.js文件,注释掉了第697行+/-附近的label.insertAfter(element);
唯一的行。
这只是一个菜鸟的解决方法;)但它做到了!
答案 5 :(得分:2)
当我使用CSS来设置jquery validate中的label.valid,label.error样式时,此按钮清除了表单字段中的所有错误和左侧和数据。
<button onclick="$('label.error').css('display', 'none');return false;">Clear Error </button>
答案 6 :(得分:1)
仅使用CSS的最简单解决方案:
label.valid {
display: none;
}
答案 7 :(得分:1)
可能一个更简单和语义上更优选的解决方案是使用css
label.error {
position:absolute;
left:20000px;
top:0;
}
input.error {
border:red 1px;
}
不需要JS,更容易管理,有屏幕阅读器的人实际上会有一些迹象表明他们错过了什么
答案 8 :(得分:1)
我有一个由另一个验证库开发的项目,我想添加验证库以使用它的功能来检查表单是否有效(使用的验证库没有该功能)
我的解决方案是: 我刚刚通过CDN添加了验证库
并在点击时使用验证功能:
$(document).on('click','#buttonID',function(){
var form = $( "#formID" );
form.validate();
console.log(form.valid());
});
并尝试通过添加CSS代码来隐藏由jquery validate引发的错误消息:
label.error{
display: none!important;
}
答案 9 :(得分:0)
您可以添加onfocus和onkeyup,以删除错误消息。
$("selector").validate({
onkeyup: false,
onfocusout: false
});