Show red border on textbox on error

Question

I am trying to show an error by changing the color of the border of a text box. I have found a lot of posts on how to do it, but I have never done anything with 'Validators' so I am confused where to start, or where to put the code.

Similar posts:

Post One

Post Two

My main question(s) are, where do I put the JS code? And secondly, how do I call the code?

Current Code

 If TicketNumber.Text = String.Empty = True Then
        NotificationLabel.Text = "Ticket Number must be filled out"
        Exit Sub
    End If

you should add tags for asp or Js or whatever to attract the attention of the right eyes — Ňɏssa Pøngjǣrdenlarp, Feb 06 '16 at 17:52
Found [Similar Post](https://stackoverflow.com/questions/43559196/how-to-make-the-textbox-border-become-red-when-a-validation-happens-to-it-in-asp) and its working perfectly using client-side — hemanth gali, Sep 24 '20 at 10:31

score 1 · Accepted Answer · edited May 23 '17 at 11:45

A RequiredFieldValidator could do it with some tricks explained here, and here. Another way is to use a CustomValidator like the following.

aspx mark-up

<asp:TextBox runat="server" ID="tbText" />
<asp:CustomValidator ID="cvCustom" ErrorMessage="Ticket Number must be filled out" 
    ControlToValidate="tbText" runat="server" OnServerValidate="ValidateInput"
     ClientValidationFunction="ValidateInput" ValidateEmptyText="True" />
<asp:Button Text="My Button" runat="server" />

Javascript

 <script type="text/javascript">
    function ValidateInput(sender, args) {
        if (args.Value == '') {
            args.IsValid = false;
            document.getElementById('<%= tbText.ClientID %>').style.borderColor = "red";
            return false;
        }
        return true;
    }
</script>

Code Behind (C#)

protected void ValidateInput(object source, ServerValidateEventArgs args)
{
    if(string.IsNullOrWhiteSpace(args.Value))
    {
        args.IsValid = false;
        tbText.Style["border-color"] = "red";
    }
    else
    {
        args.IsValid = true;
    }   
}

Show red border on textbox on error

1 Answers1