CODEWITHSUNDEEP
asp.netvb.net
dwb
dwb

Reputation: 483

Show red border on textbox on error

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

Upvotes: 0

Views: 3579

Answers (1)

mshsayem
mshsayem

Reputation: 18008

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

Upvotes: 1

Related Questions