如何通过创建边框红色来突出显示无效的jQuery输入

Question

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();
            }
        });
    });

Answer 1

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();
        },

Answer 2

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 ;)

Answer 3

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;
} 

JSFiddle

Answer 4

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 }

Answer 5

还有一些需要考虑的是HTML 5的本机浏览器功能。您还可以根据输入类型使用必填属性和其他验证属性。