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

Question

我有一个注册页面 bootstrap造型。我有<asp:RequiredFieldValidator>和 <asp:RegularExpressionValidator>验证表单。

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

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

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

文本框的原始CSS类:form-control

最简单的方法是什么，比如将 border-color 设置为红色...??

附言:在我使用的 Bootstrap 模板中，有两个字段: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如果您想完全改变方法。