自定义验证器将文本变为红色

Question

因此，此自定义验证器使用 jQuery 根据验证文本框为空的情况将标签变为红色。我遇到的问题与验证组有关。

function ButtonClick(session, args, textBoxId, labelId) {
$(document).ready
    (
        function () {

            var is_valid = $("#" + textBoxId).val() != "";
            $("#" + labelId).css("color", is_valid ? "#686868" : "red");
            args.IsValid = is_valid;
        }
    );
}

在这里，我将传递给函数的标签变为红色。我还需要传入该验证器对应的验证组。我不确定在切换验证组时如何将其他标签变回灰色。现在我有 2 个按钮和两个标签/文本框对。每个人都在自己的验证组中。当我单击第一个按钮时，一切正常。 Label1 变红。然后当我单击按钮 2 时，label2 变为红色。标签 1 不会变回灰色。我需要它变成灰色。我需要一个适用于多个验证组的通用解决方案。

我只是不确定如何通过 jQuery 访问验证组。

谢谢

<div class="formLabel">
                        <asp:Label ID="lblClientId" runat="server" CssClass="text" meta:resourcekey="lblClientIdResource" />
                    </div>
                    <div class="formValue">
                        <asp:TextBox ID="tbClientId" runat="server" CssClass="text" meta:resourcekey="tbClientIdResource" />
                        <asp:CustomValidator ID="rfvClientId" runat="server" ValidationGroup="ClientId" meta:resourcekey="rfvClientIdResource" ControlToValidate="tbClientId" ClientValidationFunction="BtnClickClientId" style="position:absolute;"  ValidateEmptyText="True" ><asp:Image ID="Image2" ImageUrl="caution_20.png" runat="server" /></asp:CustomValidator>
                    </div>

<script src="../../Scripts/Test.js" type="text/javascript"></script>
    <script type="text/javascript">
        function BtnClickClientId(session, args) {
            ButtonClick(session, args, "<%= tbClientId.ClientID %>", "<%= lblClientId.ClientID %>");
        }
        function BtnClickLastName(session, args) {
            ButtonClick(session, args, "<%= tbSearchLastName.ClientID %>", "<%= lblSearchLastName.ClientID %>");
        }
    </script>

Answer 1

我不熟悉 ASP 标签，但我确信 <asp:Label> 生成 HTML <label> 标签。所以在这种情况下，我可以提出以下建议：

function ButtonClick(session, args, textBoxId, labelId) {
    $(document).ready (
        function () {
            // $(".formLabel label").css("color", "#686868");

            // this one will work independently from ASP generated tags
            $(".formLabel").css("color", "#686868");

            var is_valid = $("#" + textBoxId).val() != "";
            $("#" + labelId).css("color", is_valid ? "#686868" : "red");
            args.IsValid = is_valid;
        }
    );
}

首先您为所有标签设置默认的“#686868”颜色，然后进行验证。

Answer 2

如何将 javascript 函数绑定到首先执行并重置页面上所有文本框颜色的按钮？如果页面上还有其他您不想影响的文本框，您可以通过一个类来定位它们，例如您的文本类：

function ResetValidationStates()
{
    $(".text").each( function() { $(this).css("color", "#686868"); } );
}

另外，与其在代码中设置内联颜色，不如在 CSS 文件中创建类，然后使用 jQuery .addClass(className) 和 .removeClass(className) 方法在文本框中设置所需的类？这样，如果您要更改网站的外观，您就不会发现自己埋头于 Javascript 进行更改。