Question

如何在输入jquery验证中突出显示错误？

请帮帮我

$(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

这两个元素放入jquery验证以突出显示错误

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

你必须编辑CSS - 而不是Javascript。带错误的输入字段会将“错误”类附加到自身。

下次 - 使用HTML检查器查看添加/更改的类;）

Answer 3

您只需添加CSS样式即可。

如果您查看jQuery验证行为，错误类将添加到您的输入元素中。

这么简单

.error {
    border: 1px solid #c00;
}

JSFiddle

Answer 4

jQuery validate插件的documentation解释了如何执行此操作：

errorClass （默认："error"）

类型：字符串

使用此课程   创建错误标签，查找现有错误标签并添加它   无效的元素。

示例：将错误类别设置为“无效”。
$(".selector").validate({
  errorClass: "invalid"
});

也是有效的：

$(".selector").validate({
  validClass: "success"
});

您当然需要将这两个类添加到您的CSS中。

.invalid { border: 1px solid red }

Answer 5

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

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

5 个答案: