2

我正在使用 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>

误差函数工作正常。但是成功功能不是为输入类型=文本添加样式，而是出现默认样式（黑色边框而不是蓝色）。我该如何解决这个问题？

这是工作小提琴

4

2 回答 2

6

将您的更改#testform input.checked为#testform input.valid. 我通过提交表单并使用开发人员工具或萤火虫检查课程来得到这个。我看到类名更改为有效且未检查

这是一个现场演示

于 2013-03-06T19:36:49.703 回答
1

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

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

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

CSS

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

JS

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

演示

于 2013-03-06T19:37:10.827 回答