Professional Web Applications Themes

Javascript question - ASP.NET General

Hi, I have an asp.net form where if the user enters an incorect date I change the color of the textbox to red and also display a label field with a message saying the date is invalid. What I would like to do is to have some way to trap the event where the user changes the date and reset the color of the textbox to white and change the error lablel to hidden. I want to do this before the page gets submitted back to the server so I've tried various Javascript routines but can't seem to get this ...

  1. #1

    Default Javascript question

    Hi,
    I have an asp.net form where if the user enters an
    incorect date I change the color of the textbox to red and
    also display a label field with a message saying the date
    is invalid. What I would like to do is to have some way to
    trap the event where the user changes the date and reset
    the color of the textbox to white and change the error
    lablel to hidden. I want to do this before the page gets
    submitted back to the server so I've tried various
    Javascript routines but can't seem to get this to work.
    (I'm using a date field here as example but the textbox
    could be anything I ant to edit in the code-behind).

    Here is the latest thing I tried, but no luck.

    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server"
    onsubmit="ChangeColor()">

    <asp:TextBox id="tbDate" style="Z-INDEX:
    120; LEFT: 240px; POSITION: absolute; TOP: 191px"
    tabIndex="6" runat="server" Width="86px"></asp:TextBox>
    <asp:Label id="lblDate" style="Z-INDEX:
    119; LEFT: 45px; POSITION: absolute; TOP: 195px"
    runat="server">As of Date </asp:Label>
    <asp:button id="btnOK" style="Z-INDEX:
    103; LEFT: 333px; POSITION: absolute; TOP: 393px"
    tabIndex="18" runat="server" Width="61px"
    Text="OK"></asp:button>
    <asp:button id="btnCancel" style="Z-INDEX:
    106; LEFT: 432px; POSITION: absolute; TOP: 393px"
    tabIndex="19" runat="server" Width="61"
    Text="Cancel"></asp:button>
    <asp:label id="lblError" style="Z-INDEX:
    101; LEFT: 32px; POSITION: absolute; TOP: 431px"
    runat="server" Visible="False" Width="565px"></asp:label>
    </form>

    <script language="javascript">
    function ChangeColor()
    {
    doent.forms(0).elements
    ['lblError'].Hidden = 'True';


    // doent.forms(0).tbDate.BackColor
    = "White";
    }
    </script>
    </body>

    Thanks,
    JOhn Ritchie
    John Guest

  2. #2

    Default Re: Javascript question

    In ASP.NET there are field validators. Drag one onto the screen and assign
    it to your control. You can specify whether you want it to run client-side
    (so it tells your right away when something is wrong) or server-side (where
    it processes all elements and shows you all-at-once what's wrong). These are
    a super time-saver...

    hth

    "John" <com> wrote in message
    news:000901c36a52$63950940$gbl... 


    Frank Guest

  3. #3

    Default Re: Javascript question

    Hi John,

    It seems to me that you are using the tools that are already available to you.
    You can add a regular expression validator, set it to dynamic and do what you
    need without writing any code. It even switches the error message on and off
    using its own Javascript.

    I've put some sample code below. You may want to find a regular expression that
    more closely meets your needs here:
    http://www.regxlib.com/DisplayPatterns.aspx?cattabindex=4&categoryId=5

    Does this help?

    Ken
    MVP [ASP.NET]


    <body>
    <form id="Form1" method="post" runat="server" onsubmit="ChangeColor()">
    <p>
    <asp:label id="lblDate" runat="server">As of Date </asp:label>
    <asp:textbox id="tbDate" tabindex="6" runat="server"
    width="86px"></asp:textbox></p>
    <p>
    <asp:button id="btnOK" tabindex="18" runat="server" width="61px"
    text="OK"></asp:button>
    <asp:button id="btnCancel" tabindex="19" runat="server" width="61"
    text="Cancel"></asp:button></p>
    <p>
    <asp:regularexpressionvalidator id="RegularExpressionValidator1"
    runat="server" errormessage="Please check the date value"
    controltovalidate="tbDate"
    display="Dynamic" validationexpression="^\d{1,2}\/\d{1,2}\/\d{4}">

    </asp:regularexpressionvalidator>
    </p>
    </form>
    </body>


    --
    Microsoft MVPs have a question for *you*: Are you patched against the Worm?
    http://www.microsoft.com/security/security_bulletins/ms03-026.asp



    "John" <com> wrote in message
    news:000901c36a52$63950940$gbl...
    Hi,
    I have an asp.net form where if the user enters an
    incorect date I change the color of the textbox to red and
    also display a label field with a message saying the date
    is invalid. What I would like to do is to have some way to
    trap the event where the user changes the date and reset
    the color of the textbox to white and change the error
    lablel to hidden. I want to do this before the page gets
    submitted back to the server so I've tried various
    Javascript routines but can't seem to get this to work.
    (I'm using a date field here as example but the textbox
    could be anything I ant to edit in the code-behind).

    Here is the latest thing I tried, but no luck.

    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server"
    onsubmit="ChangeColor()">

    <asp:TextBox id="tbDate" style="Z-INDEX:
    120; LEFT: 240px; POSITION: absolute; TOP: 191px"
    tabIndex="6" runat="server" Width="86px"></asp:TextBox>
    <asp:Label id="lblDate" style="Z-INDEX:
    119; LEFT: 45px; POSITION: absolute; TOP: 195px"
    runat="server">As of Date </asp:Label>
    <asp:button id="btnOK" style="Z-INDEX:
    103; LEFT: 333px; POSITION: absolute; TOP: 393px"
    tabIndex="18" runat="server" Width="61px"
    Text="OK"></asp:button>
    <asp:button id="btnCancel" style="Z-INDEX:
    106; LEFT: 432px; POSITION: absolute; TOP: 393px"
    tabIndex="19" runat="server" Width="61"
    Text="Cancel"></asp:button>
    <asp:label id="lblError" style="Z-INDEX:
    101; LEFT: 32px; POSITION: absolute; TOP: 431px"
    runat="server" Visible="False" Width="565px"></asp:label>
    </form>

    <script language="javascript">
    function ChangeColor()
    {
    doent.forms(0).elements
    ['lblError'].Hidden = 'True';


    // doent.forms(0).tbDate.BackColor
    = "White";
    }
    </script>
    </body>

    Thanks,
    JOhn Ritchie


    Ken Guest

  4. #4

    Default Re: Javascript question

    I meant "aren't" using the tools...

    --
    Microsoft MVPs have a question for *you*: Are you patched against the Worm?
    http://www.microsoft.com/security/security_bulletins/ms03-026.asp



    "Ken Cox [Microsoft MVP]" <ca> wrote in message
    news:u$phx.gbl...
    Hi John,

    It seems to me that you are using the tools that are already available to you.
    You can add a regular expression validator, set it to dynamic and do what you
    need without writing any code. It even switches the error message on and off
    using its own Javascript.

    I've put some sample code below. You may want to find a regular expression that
    more closely meets your needs here:
    http://www.regxlib.com/DisplayPatterns.aspx?cattabindex=4&categoryId=5

    Does this help?

    Ken
    MVP [ASP.NET]


    <body>
    <form id="Form1" method="post" runat="server" onsubmit="ChangeColor()">
    <p>
    <asp:label id="lblDate" runat="server">As of Date </asp:label>
    <asp:textbox id="tbDate" tabindex="6" runat="server"
    width="86px"></asp:textbox></p>
    <p>
    <asp:button id="btnOK" tabindex="18" runat="server" width="61px"
    text="OK"></asp:button>
    <asp:button id="btnCancel" tabindex="19" runat="server" width="61"
    text="Cancel"></asp:button></p>
    <p>
    <asp:regularexpressionvalidator id="RegularExpressionValidator1"
    runat="server" errormessage="Please check the date value"
    controltovalidate="tbDate"
    display="Dynamic" validationexpression="^\d{1,2}\/\d{1,2}\/\d{4}">

    </asp:regularexpressionvalidator>
    </p>
    </form>
    </body>


    --
    Microsoft MVPs have a question for *you*: Are you patched against the Worm?
    http://www.microsoft.com/security/security_bulletins/ms03-026.asp



    "John" <com> wrote in message
    news:000901c36a52$63950940$gbl...
    Hi,
    I have an asp.net form where if the user enters an
    incorect date I change the color of the textbox to red and
    also display a label field with a message saying the date
    is invalid. What I would like to do is to have some way to
    trap the event where the user changes the date and reset
    the color of the textbox to white and change the error
    lablel to hidden. I want to do this before the page gets
    submitted back to the server so I've tried various
    Javascript routines but can't seem to get this to work.
    (I'm using a date field here as example but the textbox
    could be anything I ant to edit in the code-behind).

    Here is the latest thing I tried, but no luck.

    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server"
    onsubmit="ChangeColor()">

    <asp:TextBox id="tbDate" style="Z-INDEX:
    120; LEFT: 240px; POSITION: absolute; TOP: 191px"
    tabIndex="6" runat="server" Width="86px"></asp:TextBox>
    <asp:Label id="lblDate" style="Z-INDEX:
    119; LEFT: 45px; POSITION: absolute; TOP: 195px"
    runat="server">As of Date </asp:Label>
    <asp:button id="btnOK" style="Z-INDEX:
    103; LEFT: 333px; POSITION: absolute; TOP: 393px"
    tabIndex="18" runat="server" Width="61px"
    Text="OK"></asp:button>
    <asp:button id="btnCancel" style="Z-INDEX:
    106; LEFT: 432px; POSITION: absolute; TOP: 393px"
    tabIndex="19" runat="server" Width="61"
    Text="Cancel"></asp:button>
    <asp:label id="lblError" style="Z-INDEX:
    101; LEFT: 32px; POSITION: absolute; TOP: 431px"
    runat="server" Visible="False" Width="565px"></asp:label>
    </form>

    <script language="javascript">
    function ChangeColor()
    {
    doent.forms(0).elements
    ['lblError'].Hidden = 'True';


    // doent.forms(0).tbDate.BackColor
    = "White";
    }
    </script>
    </body>

    Thanks,
    JOhn Ritchie



    Ken Guest

  5. #5

    Default RE: Javascript question

    Hi John,

    Firstly, I want to thank Frank and Ken for their wonderful help in this
    issue.

    In the future, you can also try the following newsgroups for
    JScript/JavaScript questions:

    If you have any concerns, please feel free to let me know.

    microsoft.public.scripting.jscript
    microsoft.public.dotnet.languages.jscript

    Best regards,

    Jacob Yang
    Microsoft Online Partner Support
    <MCSD>
    Get Secure! C www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.

    Jacob Guest

  6. #6

    Default Re: Javascript question

    Hi Ken and all,

    Thanks for the info but we long ago decided against the
    built in validators. We have to do a lot of edits against
    a database and decided to do all of the edit checks in a
    business class tier. What we do now is the business class
    checks all of the screen inputs and returns a number of
    the field in error and a friendly error message to the
    code behind. In the code behind I set the message into a
    previously visible=false label and make it visible. I
    also turn the field that has the error to a red color and
    place the cursor in that field.

    My problem is that when the user corrects the field in
    error and re-submits the page, I again check for error but
    if there are none then I continue processing the request.
    This is normally not a problem but we have several
    lengthly reports(1-2 minutes). Right now the user will
    still see the error message while s/he waits for the
    report to complete.

    What I really want to do is have some javascript on the
    page that senses a submit and can clear the error message
    before the submit goes back to the server.

    I see there is an 'onsubmit' handler but I can't seem to
    get the script right for what I want to do.

    Regards,
    John Ritchie



     
    against the Worm? 
    026.asp 
    wrote in message 
    already available to you. 
    dynamic and do what you 
    message on and off 
    regular expression that 
    cattabindex=4&categoryId=5 
    onsubmit="ChangeColor()"> 
    </asp:label> 
    runat="server" 
    runat="server" width="61px" 
    runat="server" width="61" 
    id="RegularExpressionValidator1" 
    \/\d{4}"> 
    against the Worm? 
    026.asp 
    John Guest

Similar Threads

  1. JavaScript Question
    By Seth Meranda in forum Macromedia Dynamic HTML
    Replies: 4
    Last Post: December 8th, 04:11 PM
  2. javascript question
    By newcf in forum Coldfusion - Getting Started
    Replies: 11
    Last Post: August 15th, 11:00 PM
  3. More of a javascript question
    By kenji776 in forum Coldfusion - Advanced Techniques
    Replies: 4
    Last Post: August 29th, 12:01 AM
  4. JavaScript question
    By Robin in forum PHP Development
    Replies: 8
    Last Post: November 20th, 07:44 PM
  5. Javascript Question...
    By Dizzy Jones in forum Macromedia Dreamweaver
    Replies: 3
    Last Post: July 23rd, 12:03 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139