473,320 Members | 1,904 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Javascript form control element validation

I have a form on an HTML page with the usual user name, email etc. I
want to be able to display a popup window (callout?) when a text input
control element is clicked.

For example, for the form:

<form action="something.php" method="post">
<label for="uname">User Name</label>
<input type="text" id="uname"/>
<input type="image" src="go.gif"/>
</form>

When the user clicks in the user name fields, I want to display a
callout (or popup window), with the text:

"The username must be at least 8 character long"

does anyone know how to do this?
Jun 27 '08 #1
4 1956
On May 8, 6:44*am, Ronald Raygun <inva...@domain.comwrote:
I have a form on an HTML page with the usual user name, email etc. I
want to be able to display a popup window (callout?) when a text input
control element is clicked.

For example, for the form:

<form action="something.php" method="post">
* *<label for="uname">User Name</label>
* *<input type="text" id="uname"/>
* *<input type="image" src="go.gif"/>
</form>

When the user clicks in the user name fields, I want to display a
callout (or popup window), with the text:

"The username must be at least 8 character long"

does anyone know how to do this?
To answer your question:

<input type="text" id="uname" onfocus="alert('The username must be at
least 8 character long');"/>

I think you will find that this gets a bit tedious for the user. I
would recommend just telling them right on the screen. Maybe something
like:

<form action="something.php" method="post">
<table>
<tr>
<td><label for="uname">User Name</label></td>
<td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
<td><input type="image" src="go.gif"/></td>
</tr>
</table>
</form>

Then, of course, you would perform some validation that 8 characters
were actually entered before submitting. Maybe something like this:

<script type="text/javascript">

function checkDigits() {
var uname = document.getElementById("uname").value;
if (uname.length == 8) {
return true;
}
else {

}
}

</script>
...

<form action="something.php" method="post">
<table>
<tr>
<td><label for="uname">User Name</label></td>
<td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
<td><input type="image" src="go.gif" onclick="return
checkDigits();"/></td>
</tr>
</table>
</form>

HTH...
Jun 27 '08 #2
On May 8, 7:38*am, Tom Cole <tco...@gmail.comwrote:
On May 8, 6:44*am, Ronald Raygun <inva...@domain.comwrote:


I have a form on an HTML page with the usual user name, email etc. I
want to be able to display a popup window (callout?) when a text input
control element is clicked.
For example, for the form:
<form action="something.php" method="post">
* *<label for="uname">User Name</label>
* *<input type="text" id="uname"/>
* *<input type="image" src="go.gif"/>
</form>
When the user clicks in the user name fields, I want to display a
callout (or popup window), with the text:
"The username must be at least 8 character long"
does anyone know how to do this?

To answer your question:

<input type="text" id="uname" onfocus="alert('The username must be at
least 8 character long');"/>

I think you will find that this gets a bit tedious for the user. I
would recommend just telling them right on the screen. Maybe something
like:

<form action="something.php" method="post">
*<table>
* * * * <tr>
* * * * * * * * <td><label for="uname">User Name</label></td>
* * * * * * * * <td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
* * * * * * * * <td><input type="image" src="go.gif"/></td>
* * * * </tr>
*</table>
</form>

Then, of course, you would perform some validation that 8 characters
were actually entered before submitting. Maybe something like this:

<script type="text/javascript">

function checkDigits() {
* * * * var uname = document.getElementById("uname").value;
* * * * *if (uname.length == 8) {
* * * * * * *return true;
* * * * *}
* * * * *else {

* * * * *}

}

</script>
...

<form action="something.php" method="post">
*<table>
* * * * <tr>
* * * * * * * * <td><label for="uname">User Name</label></td>
* * * * * * * * <td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
* * * * * * * * <td><input type="image" src="go.gif" onclick="return
checkDigits();"/></td>
* * * * </tr>
*</table>
</form>

HTH...- Hide quoted text -

- Show quoted text -
Sorry, using Google Groups sucks beyond all belief...

<script type="text/javascript">

function checkDigits() {
var uname = document.getElementById("uname").value;
if (uname.length == 8) {
return true;
}
else {
alert("Must be 8 characters.");
return false;
}

}

</script>
...

<form action="something.php" method="post">
<table>
<tr>
<td><label for="uname">User Name</label></td>
<td><input type="text" id="uname"/><br><label
style="font-size:
8pt;">Must be 8 characters</label></td>
<td><input type="image" src="go.gif" onclick="return
checkDigits();"/></td>
</tr>
</table>
</form>

So now the alert only pops up when the don't follow instructions :)

HTH
Jun 27 '08 #3


Tom Cole wrote:
On May 8, 7:38 am, Tom Cole <tco...@gmail.comwrote:
>>On May 8, 6:44 am, Ronald Raygun <inva...@domain.comwrote:

>>>I have a form on an HTML page with the usual user name, email etc. I
want to be able to display a popup window (callout?) when a text input
control element is clicked.
>>>For example, for the form:
>>><form action="something.php" method="post">
<label for="uname">User Name</label>
<input type="text" id="uname"/>
<input type="image" src="go.gif"/>
</form>
>>>When the user clicks in the user name fields, I want to display a
callout (or popup window), with the text:
>>>"The username must be at least 8 character long"
>>>does anyone know how to do this?

To answer your question:

<input type="text" id="uname" onfocus="alert('The username must be at
least 8 character long');"/>

I think you will find that this gets a bit tedious for the user. I
would recommend just telling them right on the screen. Maybe something
like:

<form action="something.php" method="post">
<table>
<tr>
<td><label for="uname">User Name</label></td>
<td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
<td><input type="image" src="go.gif"/></td>
</tr>
</table>
</form>

Then, of course, you would perform some validation that 8 characters
were actually entered before submitting. Maybe something like this:

<script type="text/javascript">

function checkDigits() {
var uname = document.getElementById("uname").value;
if (uname.length == 8) {
return true;
}
else {

}

}

</script>
...

<form action="something.php" method="post">
<table>
<tr>
<td><label for="uname">User Name</label></td>
<td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
<td><input type="image" src="go.gif" onclick="return
checkDigits();"/></td>
</tr>
</table>
</form>

HTH...- Hide quoted text -

- Show quoted text -


Sorry, using Google Groups sucks beyond all belief...

<script type="text/javascript">

function checkDigits() {
var uname = document.getElementById("uname").value;
if (uname.length == 8) {
return true;
}
else {
alert("Must be 8 characters.");
return false;
}

}

</script>
...

<form action="something.php" method="post">
<table>
<tr>
<td><label for="uname">User Name</label></td>
<td><input type="text" id="uname"/><br><label
style="font-size:
8pt;">Must be 8 characters</label></td>
<td><input type="image" src="go.gif" onclick="return
checkDigits();"/></td>
</tr>
</table>
</form>

So now the alert only pops up when the don't follow instructions :)

HTH

Hi Tom, thanks for your response. I realized that I probably did not
state my question correctly/clearly. The behaviour I want is different
from that which you described. For one, I want to avoid using alert
boxes (at least in this scenario) - as I agree with you that they can be
very disuptive.

The behaviour I want, is to display a "hint" (like the kind you get when
you hover over a Microsoft Excel cell that has comments). So that when a
user clicks in the username cell, they have a "hint" that gives them
further info about the field, along with the opton to close the "hint".

A crude drawing of the kind of "hint" I want to display is shown below:

(--------------------------)
( Blah, blah, blah ... )
( ... )
( ______________________X )
\/

Where the X allows them to close the "hint" being displayed

HTH
Jun 27 '08 #4
On May 8, 7:57*am, Ronald Raygun <inva...@domain.comwrote:
Tom Cole wrote:
On May 8, 7:38 am, Tom Cole <tco...@gmail.comwrote:
>On May 8, 6:44 am, Ronald Raygun <inva...@domain.comwrote:
>>I have a form on an HTML page with the usual user name, email etc. I
want to be able to display a popup window (callout?) when a text input
control element is clicked.
>>For example, for the form:
>><form action="something.php" method="post">
* <label for="uname">User Name</label>
* <input type="text" id="uname"/>
* <input type="image" src="go.gif"/>
</form>
>>When the user clicks in the user name fields, I want to display a
callout (or popup window), with the text:
>>"The username must be at least 8 character long"
>>does anyone know how to do this?
>To answer your question:
><input type="text" id="uname" onfocus="alert('The username must beat
least 8 character long');"/>
>I think you will find that this gets a bit tedious for the user. I
would recommend just telling them right on the screen. Maybe something
like:
><form action="something.php" method="post">
<table>
* * * *<tr>
* * * * * * * *<td><label for="uname">User Name</label></td>
* * * * * * * *<td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
* * * * * * * *<td><input type="image" src="go.gif"/></td>
* * * *</tr>
</table>
</form>
>Then, of course, you would perform some validation that 8 characters
were actually entered before submitting. Maybe something like this:
><script type="text/javascript">
>function checkDigits() {
* * * *var uname = document.getElementById("uname").value;
* * * * if (uname.length == 8) {
* * * * * * return true;
* * * * }
* * * * else {
* * * * }
>}
></script>
...
><form action="something.php" method="post">
<table>
* * * *<tr>
* * * * * * * *<td><label for="uname">User Name</label></td>
* * * * * * * *<td><input type="text" id="uname"/><br><label style="font-size:
8pt;">Must be 8 characters</label></td>
* * * * * * * *<td><input type="image" src="go.gif"onclick="return
checkDigits();"/></td>
* * * *</tr>
</table>
</form>
>HTH...- Hide quoted text -
>- Show quoted text -
Sorry, using Google Groups sucks beyond all belief...
*<script type="text/javascript">
*function checkDigits() {
* * * * *var uname = document.getElementById("uname").value;
* * * * * if (uname.length == 8) {
* * * * * * * return true;
* * * * * }
* * * * * else {
* * * * * * * alert("Must be 8 characters.");
* * * * * * * return false;
* * * * * }
*}
*</script>
*...
*<form action="something.php" method="post">
* <table>
* * * * *<tr>
* * * * * * * * *<td><label for="uname">User Name</label></td>
* * * * * * * * *<td><input type="text" id="uname"/><br><label
style="font-size:
*8pt;">Must be 8 characters</label></td>
* * * * * * * * *<td><input type="image" src="go.gif" onclick="return
*checkDigits();"/></td>
* * * * *</tr>
* </table>
</form>
So now the alert only pops up when the don't follow instructions :)
HTH

Hi Tom, thanks for your response. I realized that I probably did not
state my question correctly/clearly. The behaviour I want is different
from that which you described. For one, I want to avoid using alert
boxes (at least in this scenario) - as I agree with you that they can be
very disuptive.

The behaviour I want, is to display a "hint" (like the kind you get when
you hover over a Microsoft Excel cell that has comments). So that when a
user clicks in the username cell, they have a "hint" that gives them
further info about the field, along with the opton to close the "hint".

A crude drawing of the kind of "hint" I want to display is shown below:

(--------------------------)
( Blah, blah, blah ... * * )
( ... * * * * * * * * * * *)
( *______________________X )
* \/

Where the X allows them to close the "hint" being displayed

HTH- Hide quoted text -

- Show quoted text -
I'm not sure I see the distinction between this and an alert box. They
both serve the same purpose, they make the user deal with a window
that they otherwis would not have to. If it's not the first time
they've been there, then they know this already, why make them search
for and click a button on a window (whether it's an alert box or a
pretty "comic book" styled window)? I personally feel that just
placing the statement unobtrusively within the form is a more user
friendly approach.

If this is the route you prefer, you could easily create a hidden div
with a transparent background and use your hint graphic as the
background. Then simply place it where you want it relative to input
field (style.top & style.left) and make id visible.

There are several threads here about just this sort of thing.

HTH.
Jun 27 '08 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

72
by: Stephen Poley | last post by:
I have quite often (as have probably many of you) come across HTML forms with irritating bits of Javascript attached. The last straw on this particular camel's back was a large form I was asked to...
5
by: Sue | last post by:
After finishing up my first quarter JavaScript on 12/12/03, I decided to improve character checking on my project. In my project I only had to do very basic validation. Therefore, I only had one...
2
by: GIMME | last post by:
Background ... I've created a web application that allows a user to create an HTML application from IE. The application itself creates an XML representation of a XHTML form. The XHTML...
1
by: avp | last post by:
Hi, We have an ASP.NET 2.0 (C#) application that has a web form with a CheckBoxList control and a CustomValidator control. The CustomValidator control is used to validate that at least one...
8
by: chrisdude911 | last post by:
how do i add video into a javascript web page with my own custom buttons?
27
by: Chris | last post by:
Hi, I have a form for uploading documents and inserting the data into a mysql db. I would like to validate the form. I have tried a couple of Javascript form validation functions, but it...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.