Question

我有一个位于三行三列表中间的textexbox。 “外部”表格单元格用于向文本框添加一些装饰。当输入到texbox的数据无效时，文本框的颜色会改变，周围的图像也会改变。这就是我的问题所在。在登录页面上有用户名texbox和密码文本框。如果我点击提交时它们都没有填写，则texbox的颜色会发生变化，因为图像需要显示该字段。我的问题是，当用户输入一些文本时，如何让它们恢复正常？我可以编写自己的javascript来处理这个，但我正在尝试使用jQuery来验证，就像其他应用程序一样。有什么想法吗？

以下是我现在的工作：

        $.APP.login = $("#logOnDiv > form").validate({
        errorPlacement: function (error, element) {
            element.parents('table').removeClass('input-table');
            element.parents('table').addClass('invalid-input-table');
        },
        errorClass: "invalid-decorated-input"
    });

Answer 1

听取文本框本身的事件，如keypress。假设每个文本框都有一个名为isValidated ...

的类

$('.isValidated').keypress(function() {
  if($(this).val().length) { //we have text now
    $(this).parents('table.invalid-input-table').removeClass('invalid-input-table');
    //put any other code to remove other html elements (like the images here)
    //traversal would be from the text box, so you could do things like $(this).siblings('img').remove(), etc.
  }
});

有更有效的方法可以通过使用live事件并将无效的类添加到文本框本身来实现此目的，但这应该足够了，除非您谈论的是非常多的字段。

带有样式文本框的jQuery Validation插件

1 个答案: