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

Question

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

现在我想在验证失败时更改样式，验证成功后它应该变回正常。

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

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

原始 css class 文本框：form-control

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

P.S。 : 在我使用的 bootstrap 模板中，有两个字段：id 和 class。这里：

class : form-control

id : inputError

当前更改方法class：

<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

您应该只需要添加额外的条件来检查逆条件。另外，我会专门为无效版本创建第二个 class。

<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 是您的正常 class，form-invalid 是您添加红色边框的 class。

如果您想完全改变方法，请参阅此处removeClass() if it exists and here jquery change class name。

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

How can I change CSS Class of a textbox on failed Validation and then again change it back on successful validation?

html

css

asp.net

validation

twitter-bootstrap