How can i highlight error in input jquery validation??
please help me
$(function () {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
firstname: "required",
lastname: "required",
month: "required",
day: "required",
year: "required",
gender: "required",
email: "required",
phone: {
required: true,
minlength: 11
},
password: {
required: true,
minlength: 6,
equalTo: "#confirm-password"
},
submitHandler: function (form) {
form.submit();
}
});
});
this two element put in jquery validate to highlight error
errorElement: "div",
errorClass: 'help-block animation-slideDown',
errorPlacement: function (error, element) {
error.insertAfter(element);
element.addClass("edited");
element.parents(".form-control-focus > div").append(error);
error.insertAfter(element);
element.parents(".form-group > div").append(error);
},
highlight: function (e)
{
$(e).closest(".input-group ").parent().removeClass("has-error").addClass("has-error"), $(e).closest(".help-block").remove();
$(e).closest(".form-group").removeClass("has-error").addClass("has-error"), $(e).closest(".help-block").remove();
},
You have to edit CSS - not Javascript. Input field with error will get "error" class attached to itself.
Next time - use HTML inspector to see what classes are added/changed ;)
You can simply do this by adding CSS styles.
If you look the jQuery validation behavior, error class will be added to your input elements.
So simple do this
.error {
border: 1px solid #c00;
}
The documentation of the jQuery validate plugin explains how to do it:
errorClass (default:
"error"
)Type: String
Use this class to create error labels, to look for existing error labels and to add it to invalid elements.
Example: Sets the error class to “invalid”.
$(".selector").validate({ errorClass: "invalid" });
Also the valid one:
$(".selector").validate({
validClass: "success"
});
You will of course need to add these two classes to your css.
.invalid { border: 1px solid red }
还有一些需要考虑的是HTML 5的本机浏览器功能。您还可以根据输入类型使用必填属性和其他验证属性。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.