Changing textbox border and background on validation fail - asp.net

Question

is it possible to use javascript so that when an asp.net validator fails (for example the input doesnt match the regex), the textbox border and background color changes to a shade of red. Iv seen this before, but i forgot where.
Can someone please link me to a live example of such?
And a way i can do this?
Thanks
Edit:
Using this solution:
validateField = function(sender, args){
//do your validation logic
if (!args.IsValid){
var ctrl = $("#" + sender.controltovalidate);
if (ctrl){
ctrl.css({ "background-color" : "#990000", "border" : "1px solid #993300" });
}
}
return args.IsValid;
}
If i where to use regular exressions, is this the correct way to do it?
validateField = function(sender, args){
var regEx=(some regex forumla)
if (sender.value.search(regEx)==-1)
var ctrl = $("#" + sender.controltovalidate);
if (ctrl){
ctrl.css({ "background-color" : "#990000", "border" : "1px solid #993300" });
}
}
else
{
return args.IsValid;
}
}
Sorry for my lack of knowledge, iv never used javascript before. Also, what is the:
return args.IsValid;
At the end for?

Answer 1

You can use a CustomValidator, and if validation fails you can change the border and background colors in the client-side validation function:
Validation function:
validateField = function(sender, args){
//do your validation logic
if (!args.IsValid){
var ctrl = $("#" + sender.controltovalidate);
if (ctrl){
ctrl.css({ "background-color" : "#990000", "border" : "1px solid #993300" });
}
}
return args.IsValid;
}
Markup:
<asp:TextBox ID="TextBox1" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server" EnableClientScript="true"
ErrorMessage="Required"
ClientValidationFunction="validateField"
ControlToValidate="TextBox1"
Display="Dynamic">
</asp:CustomValidator>

Answer 2

I have done something like this
Private Sub HighlightInvalidFields()
For Each validator As IValidator In Page.Validators
If TypeOf validator Is BaseValidator Then
If CType(validator, BaseValidator).IsValid = False Then
Dim controlId As String = CType(validator, BaseValidator).ControlToValidate
Dim control As WebControl = TryCast(Me.FindControlRecursive(controlId), WebControl)
If control IsNot Nothing Then
control.Style.Add("background-color", "#B85449")
End If
End If
End If
Next
End Sub
I call it from the page_prerender
Private Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
If Page.IsPostBack Then HighlightInvalidFields()
End Sub

Answer 3

public class ChangeColorPage : Page {
public Label lblZip;
public RegularExpressionValidator valZip;
protected override void OnLoad(EventArgs e) {
Page.Validate();
lblZip.ForeColor = valZip.IsValid? Color.Black : Color.Red;
}
}
<asp:Label id=lblZip runat=server Text="Zip Code:"/>
<asp:TextBox id=txtZip runat=server OnChange="txtZipOnChange();" /></asp:TextBox><br>
<asp:RegularExpressionValidator id=valZip runat=server ControlToValidate=txtZip ErrorMessage="Invalid Zip Code" ValidationExpression="[0-9]{5}" /><br>
<script language=javascript>
function txtZipOnChange() {
// Do nothing if client validation is not active
if (typeof(Page_Validators) == "undefined") return;
// Change the color of the label
lblZip.style.color = valZip.isvalid ? "Black" : "Red";
}
</script>
http://msdn.microsoft.com/en-us/library/aa479045.aspx