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

Form Validation and getElementById

P: n/a
Does anyone have an idea why the form validation in the following page
wouldn't be working? I had been using XHTML 1.0 transitional which
allowed me to use the form attribute 'name.' I could then just point
the regular expression test to document.login.frmEmployeeNumber.value
and have it validate. Now that I'm at XHTML 1.1 strict, I can only use
form id's so I *thought* I could pull the elements out as I have below,
but it's not working. Any help would be greatly appreciated.

Thanks,

Justin

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN'
'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xmlns = 'http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Yellow Design Group - Inventory Control System</title>
<link href="Yellow1.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function validateMe(){

var objRegExp = /^[0-9]{6}$/ ;
if (objRegExp.test(document.getElementById('frmEmploy eeNumber').value)){
var retType = true;
} else {
alert("Please enter a valid employee number.");
return false;
}

var objRegExp = /^[a-zA-Z0-9]{6}$/ ;
if (objRegExp.test(document.getElementById
('frmEmployeePassword').value)){
var retType = true;
} else {
alert("Please enter a password.");
return false;
}
return retType;
}
</script>

</head>

<body>
<h1>Yellow Design Group - Inventory Control System</h1>
<form id="login" action="Authentication.php" method="get"
onsumbit="javascript:return validateMe();">

<fieldset>
<h5>
<legend>Login :
</legend>
</h5>

<?php
if (isset($error)) {
echo("<strong><font color=red>**Username/Password pair not found.
Please login to continue.**</font></strong><br /><br />");
}
if (isset($error2)) {
echo("<strong><font color=red>**You must login prior to accessing
the Inventory System.**</font></strong><br /><br />");
}
?>

<label for="frmEmployeeNumber"><strong>Employee Number</strong>:
</label>
&nbsp;&nbsp;&nbsp;
<input type="text" name="frmEmployeeNumber" id="frmEmployeeNumber"
maxlength="6" />
<br /> <br />
<label for="frmEmployeePassword"><strong>Employee Password</strong>:
</label>
<input type="password" name="frmEmployeePassword"
id="frmEmployeePassword" maxlength="6" />
<br />
<input type="submit" name="Submit" value="Submit" />
<input type="reset" name="Reset" value="Reset" />
</fieldset>
</form>

</body>
</html>
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies

P: n/a
On Thu, 18 Nov 2004 05:03:42 GMT, Skippytpe <sk*******@yahoo.com> wrote:
Does anyone have an idea why the form validation in the following page
wouldn't be working? I had been using XHTML 1.0 transitional which
allowed me to use the form attribute 'name.' I could then just point
the regular expression test to document.login.frmEmployeeNumber.value
and have it validate. Now that I'm at XHTML 1.1 strict, I can only use
form id's so I *thought* I could pull the elements out as I have below,
but it's not working. Any help would be greatly appreciated.
You can do everything exactly the same, you just can't use the name
attribute on the FORM element.

The easiest way to validate a form is to start with:

function validate(form) {
var elem = form.elements;

/* ... */
}

<FORM ... onsubmit="return validate(this);">

This eliminates any need to identify the form as you pass a reference
directly to the validation function. Once the validation function is
executing, you can use

elem['controlNameOrId']

to reference any control within the form.

For example:

function validate(form) {
var elem = form.elements;

if(!/^\d{6}$/.test(elem['frmEmployeeNumber'].value)) {
alert('Please enter a valid employee number.');
return false;
}

if(!/^[a-z0-9]{6}$/i.test(elem['frmEmployeePassword'].value)) {
alert('Please enter a password.');
return false;
}
/* Returning true and returning nothing is equivalent here;
* I haven't forgotten to return true, I just chose not to.
*/
}

<form action="Authentication.php" method="get"
onsubmit="return validate(this);">

Now you need only name (not id) your form controls.

By the way, is it a wise idea to send an id/password combination through
the query string?

[snip]
<link href="Yellow1.css" rel="stylesheet" type="text/css" />
I'll be mentioning some stylesheet improvements, so you could add them
here.
<script type="text/javascript">
function validateMe(){

var objRegExp = /^[0-9]{6}$/ ;
As I've shown in my example, you can use regular expression literals like
that one directly; you don't need to assign it to a variable (though that
would be a good idea if it was used more than once). Also, the escape
sequence, \d, is the same as [0-9].

[snip]
var objRegExp = /^[a-zA-Z0-9]{6}$/ ;
Whilst you do have to specify the allowed characters here, you can shorten
it to [a-z0-9] and then give the i (case-insensitive) flag. See my example.

[snip]
<form id="login" action="Authentication.php" method="get"
onsumbit="javascript:return validateMe();">
The javascript: prefix is useless here. You can remove it.
<fieldset>
<h5>
<legend>Login :
</legend>
</h5>
This is invalid HTML for a couple of reasons.

1) The only thing that may follow the open tag of a FIELDSET element is
whitespace, and the LEGEND element. Only once the LEGEND element has been
specified can other elements occur.

2) Whilst it is syntactially valid to skip heading levels - for example,
using h1 and h3, but no h2 - it is semantically invalid. You should not
use a heading level just because it *looks* right. Use the proper level
and style it with CSS. It's irrelevant anyway as you can use the heading
element at all:

<legend><h5>Login :</h5></legend>

is also invalid as the LEGEND element may only contain inline elements.

What you need to do is style the LEGEND element in your stylesheet:

legend {
/* font-size (as a percentage, NOT pixels/points/etc.)
* weight, colour, etc.
*/
}
<?php
if (isset($error)) {
echo("<strong><font color=red>**Username/Password pair not found.
Please login to continue.**</font></strong><br /><br />");
}
if (isset($error2)) {
echo("<strong><font color=red>**You must login prior to accessing
the Inventory System.**</font></strong><br /><br />");
}
?>
The FONT element is deprecated in Transitional, and illegal in Strict.
What you should have is something like

<p class="error">Username/Password pair not found.</p>

and in your stylesheet

.warning {
color: red;
font-weight: bold;
/* Replace the two line breaks: */
margin-bottom: 2em;
}

Note that once you start specifying colours, you must specify both
foreground and background colours, so make sure you have the
background-color property set somewhere that will be inherited here.
<label for="frmEmployeeNumber"><strong>Employee Number</strong>:
</label>
&nbsp;&nbsp;&nbsp;
<input type="text" name="frmEmployeeNumber" id="frmEmployeeNumber"
maxlength="6" />
This would be better written as

<label for="formEmployeeNumber">Employee Number:
<input type="text" name="frmEmployeeNumber" maxlength="6" />
</label>

and then style the label. You can make it a block element and add
margins/padding, which would remove
<br /> <br />


these, and the non-breaking spaces. You can Google for information on
laying-out forms with CSS. You can no doubt search the archives of
alt.html, comp.infosystems.www.authoring.html and ciwa.stylesheets, too.

[snip]

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #2

P: n/a
"Skippytpe" <sk*******@yahoo.com> wrote in message
news:Xn*******************************@216.77.188. 18...
Does anyone have an idea why the form validation in the following page
wouldn't be working? I had been using XHTML 1.0 transitional which
allowed me to use the form attribute 'name.' I could then just point
the regular expression test to document.login.frmEmployeeNumber.value
and have it validate. Now that I'm at XHTML 1.1 strict, I can only use
form id's so I *thought* I could pull the elements out as I have below,
but it's not working. Any help would be greatly appreciated.

Thanks,

Justin

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN'
'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xmlns = 'http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Yellow Design Group - Inventory Control System</title>
<link href="Yellow1.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function validateMe(){

var objRegExp = /^[0-9]{6}$/ ;
if (objRegExp.test(document.getElementById('frmEmploy eeNumber').value)){
var retType = true;
} else {
alert("Please enter a valid employee number.");
return false;
}

var objRegExp = /^[a-zA-Z0-9]{6}$/ ;
if (objRegExp.test(document.getElementById
('frmEmployeePassword').value)){
var retType = true;
} else {
alert("Please enter a password.");
return false;
}
return retType;
}
</script>

</head>

<body>
<h1>Yellow Design Group - Inventory Control System</h1>
<form id="login" action="Authentication.php" method="get"
onsumbit="javascript:return validateMe();">

<fieldset>
<h5>
<legend>Login :
</legend>
</h5>

<?php
if (isset($error)) {
echo("<strong><font color=red>**Username/Password pair not found.
Please login to continue.**</font></strong><br /><br />");
}
if (isset($error2)) {
echo("<strong><font color=red>**You must login prior to accessing
the Inventory System.**</font></strong><br /><br />");
}
?>

<label for="frmEmployeeNumber"><strong>Employee Number</strong>:
</label>
&nbsp;&nbsp;&nbsp;
<input type="text" name="frmEmployeeNumber" id="frmEmployeeNumber"
maxlength="6" />
<br /> <br />
<label for="frmEmployeePassword"><strong>Employee Password</strong>:
</label>
<input type="password" name="frmEmployeePassword"
id="frmEmployeePassword" maxlength="6" />
<br />
<input type="submit" name="Submit" value="Submit" />
<input type="reset" name="Reset" value="Reset" />
</fieldset>
</form>

</body>
</html>


Typo!

Change
onsumbit="javascript:return validateMe();">
to
onsubmit="return validateMe();">
Jul 23 '05 #3

P: n/a
"McKirahan" <Ne**@McKirahan.com> wrote in message news:<aV_md.353509$wV.183895@attbi_s54>...
"Skippytpe" <sk*******@yahoo.com> wrote in message
news:Xn*******************************@216.77.188. 18...
Does anyone have an idea why the form validation in the following page
wouldn't be working? I had been using XHTML 1.0 transitional which
allowed me to use the form attribute 'name.' I could then just point
the regular expression test to document.login.frmEmployeeNumber.value
and have it validate. Now that I'm at XHTML 1.1 strict, I can only use
form id's so I *thought* I could pull the elements out as I have below,
but it's not working. Any help would be greatly appreciated.

Thanks,

Justin

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN'
'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xmlns = 'http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
<title>Yellow Design Group - Inventory Control System</title>
<link href="Yellow1.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function validateMe(){

var objRegExp = /^[0-9]{6}$/ ;
if (objRegExp.test(document.getElementById('frmEmploy eeNumber').value)){
var retType = true;
} else {
alert("Please enter a valid employee number.");
return false;
}

var objRegExp = /^[a-zA-Z0-9]{6}$/ ;
if (objRegExp.test(document.getElementById
('frmEmployeePassword').value)){
var retType = true;
} else {
alert("Please enter a password.");
return false;
}

return retType;
}
</script>

</head>

<body>
<h1>Yellow Design Group - Inventory Control System</h1>
<form id="login" action="Authentication.php" method="get"
onsumbit="javascript:return validateMe();">

<fieldset>
<h5>
<legend>Login :
</legend>
</h5>

<?php
if (isset($error)) {
echo("<strong><font color=red>**Username/Password pair not found.
Please login to continue.**</font></strong><br /><br />");
}
if (isset($error2)) {
echo("<strong><font color=red>**You must login prior to accessing
the Inventory System.**</font></strong><br /><br />");
}
?>

<label for="frmEmployeeNumber"><strong>Employee Number</strong>:
</label>
&nbsp;&nbsp;&nbsp;
<input type="text" name="frmEmployeeNumber" id="frmEmployeeNumber"
maxlength="6" />
<br /> <br />
<label for="frmEmployeePassword"><strong>Employee Password</strong>:
</label>
<input type="password" name="frmEmployeePassword"
id="frmEmployeePassword" maxlength="6" />
<br />
<input type="submit" name="Submit" value="Submit" />
<input type="reset" name="Reset" value="Reset" />
</fieldset>
</form>

</body>
</html>


Typo!

Change
onsumbit="javascript:return validateMe();">
to
onsubmit="return validateMe();">

Another alternative:

<script type="text/javascript">

function validateMe(els)
{
var val, msg = "", focus_me = null;
val = els.frmEmployeeNumber.value;
if (/^\s*$/.test(val))
{
msg += " no Employee Number\n";
focus_me = focus_me || els.frmEmployeeNumber;
}
else if (!/^\d{6}$/.test(val))
{
msg += " Employee Number not 6 digits\n";
focus_me = focus_me || els.frmEmployeeNumber;
}
val = els.frmEmployeePassword.value;
if (/^\s*$/.test(val))
{
msg += " no Employee Password\n";
focus_me = focus_me || els.frmEmployeePassword;
}
else if (!/^[A-Z0-9]{6}$/i.test(val))
{
msg += " Employee Password not 6 digits\n";
focus_me = focus_me || els.frmEmployeePassword;
}
if (msg != "")
{
var prefix = "\nThe following problems were noted:\n\n";
var suffix = "\nPlease correct and re-submit. Thank you.\n\n";
alert(prefix + msg + suffix);
if (focus_me)
{
focus_me.focus();
focus_me.select();
}
return false;
}
return true;
}

</script>
..............
..............
<form id="login" action="Authentication.php" method="get"
onsubmit="return validateMe(this.elements)">

What is a sumbit anyway?
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.