Custom Validator Turns Text Red

So this custom validator uses jQuery to turn a label red based on validation of a textbox being empty. The problem I am having has to do with validation groups.

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;
        }
    );
}

Here I turn the label red that was passed into the function. I need to pass in the validation group as well that this validator corresponds to. I am jsut unsure how to turn the other labels back to gray when the validation group is switched. Right now I have 2 buttons and two label/textbox pairs. Each is on their own validation group. When I click button one, everything works perfect. Label1 goes red. When I then click buton two, label2 turns red. Label 1 does not turn back to gray. I need it to turn to gray. I need a generic solution that will work for several validation groups.

I am jsut unsure how to access validation groups through jQuery.

Thanks

<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>

---

I'm not familiar with ASP tags, but I'm sure that <asp:Label> generates HTML <label> tag. So in this case I can suggest the following:

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;
        }
    );
}

by this at first you setting the default "#686868" color for all labels and then doing your validation.

---

How about you bind a javascript function to your buttons that executes first and resets the colour of all textboxes on the page? If there are other textboxes on the page that you don't want to affect, you can target them by a class, such as your text one:

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

Additionally, instead of setting the colour inline in your code, why don't you create classes in your CSS file and then use the jQuery .addClass(className) and .removeClass(className) methods to set the classes you want on your textboxes? That way if you come to change the look of your site, you won't find yourself burying through Javascript to make changes.