如何更改有效表单字段的类 - jQuery表单验证插件

I am using bassistance jQuery form validation plugin.

我正在使用bassistance jQuery表单验证插件。

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://jquery.bassistance.de/validate/demo/

I made a form with form fields and set rules;

我创建了一个带有表单字段和设置规则的表单;

JavaScript

$(document).ready(function() {
    $.validator.setDefaults({
        submitHandler: function() {
          alert("submitted!");
        }
    });
    var validator = $("#testform").validate({
        rules: {
            field1: "required",
        },
        messages: {
            field1: "",
        },
        error: function(element) {
            element.addClass("error");
        },
        success: function(label) {
            label.addClass("checked");
        }
    });
});

CSS

#testform input{
  border: solid 2px black;
}
#testform input.error{
  border: solid 2px #CC0000;
}
#testform input.checked{
  border: solid 2px #094AB2;
}

HTML

<form id="testform" name="testform">
<input id="field1" name="field1" type="text" value="">
<input id="field2" name="field2" type="text" value="">
<input type="submit" value="submit"/>
</form>

The error function is working alright. But the success function is not adding styles to input type=text, instead, default style appears (black border instead of blue). How can I solve this?

错误功能正常工作。但是成功函数不是为输入type = text添加样式,而是显示默认样式(黑色边框而不是蓝色)。我怎么解决这个问题?

Here is the working fiddle

这是工作小提琴

2 个解决方案

#1

Change your #testform input.checked to #testform input.valid. I got this by submitting the form and check the class with developer tools or firebug. I saw the class name changed to valid and not checked

将您的#testform input.checked更改为#testform input.valid。我通过提交表单并使用开发人员工具或firebug检查课程来获得此功能。我看到班级名称已更改为有效且未选中

Here's a Live Demo

这是现场演示

#2

The success callback in the validate method passes in the label for the given form input. If the label does not exist, it creates one.

validate方法中的成功回调传递给定表单输入的标签。如果标签不存在,则会创建一个标签。

The reason your code does not work as you intend is because your CSS assumes the checked class will be added to the input where it is actually added to the label.

您的代码无法按预期工作的原因是因为您的CSS假定已检查的类将被添加到实际添加到标签的输入中。

The validate method automatically adds the valid class to inputs that pass validation and the error class those that do not. You can probably remove the specific callbacks unless you plan to perform additional tasks.

validate方法自动将有效类添加到通过验证的输入,将错误类添加到不通过验证的错误类。除非您计划执行其他任务,否则您可以删除特定的回调。

CSS

#testform input.valid{
  border: solid 2px #094AB2;
}

var validator = $("#testform").validate({
    rules: {
        field1: "required",
    },
    messages: {
        field1: "",
    }
});

DEMO

#1