如何在验证失败时更改文本框的 CSS 类，然后在验证成功时再次将其更改回？

Question

我有一个bootstrap 样式的注册页面。我有<asp:RequiredFieldValidator> 和<asp:RegularExpressionValidator> 来验证表单。

现在我想在验证失败时更改样式，并且在验证成功时应该恢复正常。

我找到了几个答案，例如：txtBox.CssClass += "error_class" ;。

但我想知道如何以确切的方式完成。我发现一个脚本确实根据失败的验证更改了 CSS，但是在 successful 验证后它并没有更改为原始 CSS。

文本框的原始css类：form-control

最简单的方法是什么，例如将边框颜色设置为红色...？？

附： ：在我使用的引导模板中，有两个字段：id 和 class。这里：

class : form-control

id : inputError

当前更改类的方法：

<script type="text/javascript">
        function BtnClick() {
            var val = Page_ClientValidate();

            if (!val) {
                var i = 0;
                for (; i < Page_Validators.length; i++) {
                    if (!Page_Validators[i].isvalid) {
                        $("#" + Page_Validators[i].controltovalidate).css("border-color", "red");
                    }
                }
            }
            return val;
        }
    </script>

Answer 1

您应该只需要添加额外的条件来检查相反的条件。我还会专门为无效版本创建第二个类。

<script type="text/javascript">
    function BtnClick() {
        var val = Page_ClientValidate();

        if (!val) {
            for (i = 0; i < Page_Validators.length; i++) {
                if (!Page_Validators[i].isvalid) {
                    if (!($("#" + Page_Validators[i].controltovalidate).hasClass("form-invalid")))
                        $("#" + Page_Validators[i].controltovalidate).toggleClass("form-control form-invalid");
                }
                else {
                    if (!($("#" + Page_Validators[i].controltovalidate).hasClass("form-control")))
                        $("#" + Page_Validators[i].controltovalidate).toggleClass("form-control form-invalid");
                }
            }
        }
        return val;
    }
</script>

form-control 是您的普通班级，form-invalid 是您添加红色边框的班级。

如果您想更改方法，请参阅此处removeClass() if it exists 和此处jquery change class name。