[英]errorClass in jquery validate plugin?
I am using jquery validate plugin in my web application to validate forms for blank and other simple validations. 我在我的Web应用程序中使用jquery validate插件来验证表单的空白和其他简单验证。
I am using below code to setup jquery validate plugin for my form, there is a erroClass
option in it, where I have defined a CSS class name authError
which I want to apply on error messages, but its applying the same class to INPUT box as well, I don't want to apply it in INPUT box, just want it for error message. 我正在使用下面的代码为我的表单设置jquery验证插件,其中有一个erroClass
选项,其中我定义了一个CSS类名authError
,我想将其应用于错误消息,但它将与输入框相同的类应用于好吧,我不想在“输入”框中应用它,只希望它显示错误消息。 Please check and help. 请检查并提供帮助。 Thanks! 谢谢!
$("#frmSignin").validate({
debug: false,
errorClass: "authError",
errorElement: "span",
rules: {
username: {
required: true,
minlength: 10
},
password: {
required: true
}
},
messages: {
username: {
required: "Please enter your username"
},
password: {
required: "Please enter your password"
}
}
});
Thanks, for the tricks guys, but I instead found a better way by using the jQuery code only. 谢谢,给了我一些技巧,但是我却只通过使用jQuery代码找到了一种更好的方法。 There is a highlight
event in validate plugin which is called when error occurred to highlight the error fields, I just removed the class form element when this event is called. validate插件中有一个highlight
事件,当发生错误以突出显示错误字段时会调用该事件,我只是在调用此事件时删除了类form元素。
$("#frmSignin").validate({
debug: false,
errorClass: "authError",
errorElement: "span",
rules: {
username: {
required: true,
minlength: 10
},
password: {
required: true
}
},
messages: {
username: {
required: "Please enter your username"
},
password: {
required: "Please enter your password"
}
},
highlight: function(element, errorClass) {
$(element).removeClass(errorClass);
}
});
$("#borrowerForm").validate({
errorElement: 'span',
errorElementClass: 'input-validation-error',
errorClass: 'field-validation-error',
errorPlacement: function(error, element) {},
highlight: function(element, errorClass, validClass) {
$(element).addClass(this.settings.errorElementClass).removeClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(this.settings.errorElementClass).removeClass(errorClass);
},
onkeyup: false,
errorPlacement: function (error, element) { error.insertAfter(element); }
});
You should actually be just defining different classes for input and span ( span since errorElement is set to span, otherwise it will be label ), rather than removing the applied class 实际上,您应该只为input和span定义不同的类( span,因为errorElement设置为span,否则将为label ),而不是删除应用的类
eg 例如
span.authError {color:red;} span.authError {color:red;}
input.authError {border:1px dotted red;} input.authError {边界:1px点缀为红色;}
and not just .authError{} which will get applied to both input and span 而不仅仅是.authError {} ,它将同时应用于输入和跨度
In the jQuery validation plugin, the errorClass
is both applied to the error message element (usually a <label>
, but a <span>
in your case) and to the validated element itself. 在jQuery验证插件中, errorClass
既应用于错误消息元素(通常为<label>
,但在您的情况下为<span>
) ,也应用于验证的元素本身。 Since you only want to style the error message element, you should write: 由于您只想设置错误消息元素的样式,因此应编写:
span.authError {
// Your error element style.
}
Check this: 检查一下:
jQuery.validator.messages.required = "";
$('#frm-contact').validate({
invalidHandler: function (e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted below'
: 'You missed ' + errors + ' fields. They have been highlighted below';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
onkeyup: false,
submitHandler: function () {
$("div.error").hide();
alert("submit! use link below to go to the other step");
},
highlight: function (element, required) {
$(element).fadeOut(function () {
$(element).fadeIn();
$(element).css('border', '2px solid #FDADAF');
});
},
unhighlight: function (element, errorClass, validClass) {
$(element).css('border', '1px solid #CCC');
}
});
If you want to give css for the error message. 如果要给css提供错误信息。 Then in place of using errorClass define css rule 然后代替使用errorClass定义CSS规则
label.error
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.