Change CSS class when validation fails

Question

I'm having a issue with validations on my aspx page; I have the following code:

<td>
    Id
</td>
<td>
     <asp:TextBox ID="txtId" runat="server"></asp:TextBox>
</td>
<td>
     <asp:RequiredFieldValidator ID="reqId" runat="server" ErrorMessage="Error" ControlToValidate="txtId" SetFocusOnError="true"></asp:RequiredFieldValidator>
</td>

And the following JavaScript code:

<script type="text/javascript">
    function ValidateData() {
        var v1 = "#<%= txtId.ClientID %>";
        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("background-color", "red");
                }
            }
        }
        return val;
    }
</script>

This code I extracted from this post: Change textbox’s css class when ASP.NET Validation fails

The problem is that I'm getting the error:

Object Expected

on the following line:

 $("#" + Page_Validators[i].controltovalidate)

so, the property controltovalidate is not present when I debug the code (on Internet Explorer 7).

I hope you can help me solve this issue, I don't know how to get that property or what am I missing.

---

Oh, I forgot, this is the code of my button:

<asp:Button ID="btnSend" runat="server" Text="Send" 
                            OnClientClick="return ValidateData();"
                            onclick="btnSend_Click" />

Answer 1

controltovalidate should be replaced with the ID of the control you want to validate.

So the line should be something like:

$("#" + Page_Validators[i].txtId)