By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,728 Members | 2,462 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,728 IT Pros & Developers. It's quick & easy.

Javascript question

P: n/a
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()
{
document.forms(0).elements
['lblError'].Hidden = 'True';
// document.forms(0).tbDate.BackColor
= "White";
}
</script>
</body>

Thanks,
JOhn Ritchie
Nov 17 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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" <jc*******@dashgroup.com> wrote in message
news:00****************************@phx.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()
{
document.forms(0).elements
['lblError'].Hidden = 'True';
// document.forms(0).tbDate.BackColor
= "White";
}
</script>
</body>

Thanks,
JOhn Ritchie

Nov 17 '05 #2

P: n/a
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/DisplayPatter...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/se...s/ms03-026.asp

"John" <jc*******@dashgroup.com> wrote in message
news:00****************************@phx.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()
{
document.forms(0).elements
['lblError'].Hidden = 'True';
// document.forms(0).tbDate.BackColor
= "White";
}
</script>
</body>

Thanks,
JOhn Ritchie
Nov 17 '05 #3

P: n/a
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/se...s/ms03-026.asp

"Ken Cox [Microsoft MVP]" <BA************@sympatico.ca> wrote in message
news:u$**************@tk2msftngp13.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/DisplayPatter...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/se...s/ms03-026.asp

"John" <jc*******@dashgroup.com> wrote in message
news:00****************************@phx.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()
{
document.forms(0).elements
['lblError'].Hidden = 'True';
// document.forms(0).tbDate.BackColor
= "White";
}
</script>
</body>

Thanks,
JOhn Ritchie

Nov 17 '05 #4

P: n/a
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.

Nov 17 '05 #5

P: n/a
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

-----Original Message-----
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/se...ulletins/ms03- 026.asp
"Ken Cox [Microsoft MVP]" <BA************@sympatico.ca> wrote in messagenews:u$**************@tk2msftngp13.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 youneed without writing any code. It even switches the error message on and offusing its own Javascript.

I've put some sample code below. You may want to find a regular expression thatmore 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/se...ulletins/ms03- 026.asp
"John" <jc*******@dashgroup.com> wrote in message
news:00****************************@phx.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()
{
document.forms(0).elements
['lblError'].Hidden = 'True';
// document.forms(0).tbDate.BackColor
= "White";
}
</script>
</body>

Thanks,
JOhn Ritchie

.

Nov 17 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.