Client-Side Validation to change Textbox Background Color?

Discussion in 'ASP .Net Web Controls' started by James Radke, Oct 14, 2003.

  1. James Radke

    James Radke Guest

    Hello,

    I would like to create some type of client-side validation that will change
    the background color of a textbox (say to red with white text) when the
    entered data is invalid (i.e. not numeric, not a valid date, etc.)...

    I have figured out one way to do that using javascript, and the existing
    ..NET expressionvalidation controls; however, this requires that I write a
    new javascript function for each textbox controls OnChange event that I want
    to validate so that I can reference the appropriate textbox control and it's
    associated validation control. Additionally this forces me to hardcode the
    long .NET generated ID's (i.e. __ctl_ctl0__<id>) - which is kind of a pain.

    What I am wondering is if there is a better way that I can do this so that I
    don't send the round-trip to the server after they exit each field and still
    get the great notification/visual of the background color of the textbox
    changing?
    Thanks!

    Jim
     
    James Radke, Oct 14, 2003
    #1
    1. Advertising

  2. James Radke

    MSFT Guest

    Hi James,

    I think you can still use the validator control in ASP.NET, including
    RequiredfieldValidator, CompareValidator, RangeValidator,
    RegularExpressionValidator, and especially, CustomValidator. You can
    specify clientvalidfunction to it. And all these validating is perform with
    client script. For more information on ASP.NET validator, you can refer to
    this article:

    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon/html/
    vboriwebformsvalidation.asp


    Luke
    Microsoft Online Support

    Get Secure! www.microsoft.com/security
    (This posting is provided "AS IS", with no warranties, and confers no
    rights.)
     
    MSFT, Oct 14, 2003
    #2
    1. Advertising

  3. James Radke

    tommy Guest

    hello Jim,

    to modify textboxes on client, for example the background, you have to
    put following to your <asp:textbox>

    onblur="this.style.backgroundcolor='#EEEEEE'"
    onfocus="this.style.backgroundcolor='#38FAEA'"


    best regards


    tommy


    "James Radke" <> wrote in message news:<>...
    > Hello,
    >
    > I would like to create some type of client-side validation that will change
    > the background color of a textbox (say to red with white text) when the
    > entered data is invalid (i.e. not numeric, not a valid date, etc.)...
    >
    > I have figured out one way to do that using javascript, and the existing
    > .NET expressionvalidation controls; however, this requires that I write a
    > new javascript function for each textbox controls OnChange event that I want
    > to validate so that I can reference the appropriate textbox control and it's
    > associated validation control. Additionally this forces me to hardcode the
    > long .NET generated ID's (i.e. __ctl_ctl0__<id>) - which is kind of a pain.
    >
    > What I am wondering is if there is a better way that I can do this so that I
    > don't send the round-trip to the server after they exit each field and still
    > get the great notification/visual of the background color of the textbox
    > changing?
    > Thanks!
    >
    > Jim
     
    tommy, Oct 14, 2003
    #3
  4. Hi James,

    As a supply, I attach a sample, to demo how we use a customvalidator
    control to change a text box's backgroud color when its text is less than 8
    charactors:

    <asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 64px; POSITION:
    absolute; TOP: 96px" runat="server"
    Width="224px" Height="48px" ></asp:TextBox>
    <asp:CustomValidator id="CustomValidator1" style="Z-INDEX: 102; LEFT:
    376px; POSITION: absolute; TOP: 104px"
    runat="server" Width="192px" Height="32px"
    ControlToValidate="TextBox1" ClientValidationFunction="validateLength"
    ErrorMessage=""></asp:CustomValidator>


    <SCRIPT LANGUAGE="JavaScript">
    function validateLength(oSrc, args){
    args.IsValid = (args.Value.length >= 8);

    if (args.Value.length < 8)
    document.Form1.TextBox1.style.backgroundColor='#ffff00';

    }

    </SCRIPT>


    Hope this help,

    Luke
    Microsoft Online Support

    Get Secure! www.microsoft.com/security
    (This posting is provided "AS IS", with no warranties, and confers no
    rights.)
     
    ¥xÆW·L³n§Þ³N³B¤ä´©³¡, Oct 16, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt
    Replies:
    14
    Views:
    4,213
    Chad Z. Hower aka Kudzu
    Jan 30, 2004
  2. Craig Duffy

    Can't change textbox background color

    Craig Duffy, Aug 17, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    1,086
    Seanray
    Sep 10, 2004
  3. =?Utf-8?B?dmlkeWE=?=
    Replies:
    1
    Views:
    781
    Kevin Spencer
    Jun 2, 2005
  4. Boss302
    Replies:
    0
    Views:
    1,100
    Boss302
    Nov 21, 2006
  5. ML
    Replies:
    0
    Views:
    335
Loading...

Share This Page