Re: Javascript form control element validation
- From: Ronald Raygun <invalid@xxxxxxxxxx>
- Date: Thu, 08 May 2008 12:57:10 +0100
Tom Cole wrote:
On May 8, 7:38 am, Tom Cole <tco...@xxxxxxxxx> wrote:
On May 8, 6:44 am, Ronald Raygun <inva...@xxxxxxxxxx> wrote:
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
.
- Follow-Ups:
- Re: Javascript form control element validation
- From: Tom Cole
- Re: Javascript form control element validation
- References:
- Javascript form control element validation
- From: Ronald Raygun
- Re: Javascript form control element validation
- From: Tom Cole
- Re: Javascript form control element validation
- From: Tom Cole
- Javascript form control element validation
- Prev by Date: Re: window width
- Next by Date: Real-time database monitor
- Previous by thread: Re: Javascript form control element validation
- Next by thread: Re: Javascript form control element validation
- Index(es):
Relevant Pages
|
