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

Javascript form control element validation

P: n/a
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
Share this Question
Share on Google+
4 Replies


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

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

P: n/a


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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.