Validation on a text box - colour it red? : The Official Microsoft ASP.NET Forums

Reply

Validation on a text box - colour it red?

Nov 23, 2012 05:34 PM|LINK

Sorry if this is a dumb question but bear with me, I'm new to ASP.

I have some code in a table that looks like the code at the bottom of this post.

If the textbox isn't filled in, a red exclamation mark appears next to it. I assume the colour is picked up from the CssClass?

I'd rather the text box background went red (or a red border appeared around the text box) as I think that looks better.

Can anyone give me a piece of code that will achieve this.

I'm using VB.

<tr>
        <td style="padding-bottom: 6px;">
        <asp:TextBox ID="txtEvDate" runat="server" MaxLength="10" Width="90"></asp:TextBox>
                <asp:RequiredFieldValidator ID="rfvEvDate" runat="server" ErrorMessage="!" CssClass="Error" ControlToValidate="txtEvDate" ValidationGroup="vgrEdit" InitialValue="" SetFocusOnError="true" style="padding-right: 5px;"></asp:RequiredFieldValidator>
        </td>
</tr>

Edited by StaceyF on Nov 23, 2012 05:35 PM
Edited by StaceyF on Nov 23, 2012 05:36 PM
Moved by bbcompent1 on Nov 23, 2012 05:37 PM

Reply

Re: Validation on a text box - colour it red?

Nov 23, 2012 05:37 PM|LINK

Show your css from the "Error" CSS class in your css file.

Mark as answer posts that helped you.

Reply

Re: Validation on a text box - colour it red?

Nov 23, 2012 05:46 PM|LINK

hi I think error result to use Validation Group with Required validation

you must set it to other controls

<tr>
        <td style="padding-bottom: 6px;">
        <asp:TextBox ID="txtEvDate" runat="server" MaxLength="10" Width="90" ValidationGroup="vgrEdit"></asp:TextBox>
                <asp:RequiredFieldValidator ID="rfvEvDate" runat="server" ErrorMessage="!" CssClass="Error" ControlToValidate="txtEvDate" ValidationGroup="vgrEdit" InitialValue="" SetFocusOnError="true" style="padding-right: 5px;"></asp:RequiredFieldValidator>
        </td>
</tr>

.....................................

www.rtoosh.net

Reply

Re: Validation on a text box - colour it red?

Nov 23, 2012 05:47 PM|LINK

You may want to go with a CustomValidator, instead of the RequiredFieldValidator. Depending on how much you want to change things:

<asp:CustomValidator
    ID="cvEvDate" runat="server"
    ErrorMessage="!"
    ControlToValidate="txtEvDate" OnServerValidate="chkEvDate">
  </asp:CustomValidator>

VB Code:

  Protected Sub chkEvDate(ByVal source As Object, ByVal args As ServerValidateEventArgs)
    ' CustomValidator - Verify txtEvDate has an entry
    args.IsValid = True
    If txtEvDate.Text = String.Empty Then
      txtEvDate.BackColor = Drawing.Color.Red
      args.IsValid = False
    End If
  End Sub

Edited by paindaasp on Nov 23, 2012 05:48 PM

Reply

Re: Validation on a text box - colour it red?

Nov 23, 2012 06:08 PM|LINK

bbcompent1

Show your css from the "Error" CSS class in your css file.

Would this be it?

fieldset .Error
{
    Font-size: small;
    color: Red;
}

Reply

Re: Validation on a text box - colour it red?

Nov 23, 2012 06:38 PM|LINK

Try your CSS like this:

fieldset .Error
{
Font-size: small;
Background: Red;
}

Mark as answer posts that helped you.

Reply

Re: Validation on a text box - colour it red?

Nov 24, 2012 12:09 PM|LINK

Thanks for the replies guys, still not there though.

paindaasp - your code looks like it should work but it does nothing which is bizarre. Is there a way to step through code execution like you can with VBA?

bbcompent1 - your code turns the background of the exclamation marks red

Reply

Re: Validation on a text box - colour it red?

Nov 25, 2012 12:08 AM|LINK

Sorry, brain cramp. Remove the ControlToValidate="txtEvDate" when setting up the CustomValidator.

<asp:CustomValidator
    ID="cvEvDate" runat="server"
    ErrorMessage="!"
    OnServerValidate="chkEvDate">
  </asp:CustomValidator>

Reply

Re: Validation on a text box - colour it red?

Nov 25, 2012 12:13 AM|LINK

To set BreakPoints for debugging. Right click on a line of code, select Breakpoint -> Insert BreakPoint. Then when you Start Debugging(F5), if that line is hit, execution will pause, to continue hit F5, or F11 to go to next line of code.

Reply

Ruchira

All-Star

42885 Points

7019 Posts

MVP

Re: Validation on a text box - colour it red?

Nov 25, 2012 01:07 PM|LINK

Hello,

The things is, when you assign a CSS class to the validator itself, then the CSS get applies to the validator, not to the textbox. If you need to apply a CSS class for the textbox when the validation fails, then you have write your own code for that.

I would remove the default asp.net validators and do it with javascripts/jQuery. First check the textbox is empty or not using the javascripts/jQuery and apply CSS according to it. The sample code I've created for you will help you to achieve this,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ForumTests.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
    </script>
    <script>
        function Check() {
            if ($("#<%=TextBox1.ClientID%>").val() == "") {
                $("#<%=TextBox1.ClientID%>").css("border-color", "Red");
                return false;
            }
            else
                return true;
        }
        function Reset() {
            $("#<%=TextBox1.ClientID%>").css("border-color", "");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" onfocus="Reset();"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return Check();" />
        </div>
    </form>
</body>
</html>

Please 'Mark as Answer' if this post helps you.

My Tech blog | My YouTube Channel

Validation on a text box - colour it red? RSS

11 replies

StaceyF

Validation on a text box - colour it red?

bbcompent1

Re: Validation on a text box - colour it red?

Alsaady

Re: Validation on a text box - colour it red?

paindaasp

Re: Validation on a text box - colour it red?

StaceyF

Re: Validation on a text box - colour it red?

bbcompent1

bbcompent1

Re: Validation on a text box - colour it red?

StaceyF

Re: Validation on a text box - colour it red?

paindaasp

Re: Validation on a text box - colour it red?

paindaasp

Re: Validation on a text box - colour it red?

Ruchira

Re: Validation on a text box - colour it red?

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft