CODEWITHSUNDEEP
asp.netcsstextbox
TheGateKeeper
TheGateKeeper

Reputation: 4530

Changing textbox border and background on validation fail

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?

Upvotes: 1

Views: 6514

Answers (3)

James Johnson
James Johnson

Reputation: 46047

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>

Upvotes: 1

CBRRacer
CBRRacer

Reputation: 4659

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

Upvotes: 0

jabroni
jabroni

Reputation: 706

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

Upvotes: 0

Related Questions