Question

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

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

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

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

的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>

错误功能正常。但成功函数不是为输入type = text添加样式，而是显示默认样式（黑色边框而不是蓝色）。我该如何解决这个问题？

以下是工作 fiddle

Answer 1

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

这是Live Demo

Answer 2

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

您的代码无法正常工作的原因是因为您的CSS假定checked类将被添加到实际添加到标签的输入中。

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

<强> CSS

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

<强> JS

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

<强> DEMO

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

2 个答案: