Form Validation and getElementById

[Skippytpe]

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. frmEmployeeNumb er.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.c ss" rel="stylesheet " type="text/css" />

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

var objRegExp = /^[0-9]{6}$/ ;
if (objRegExp.test (document.getEl ementById('frmE mployeeNumber') .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.getEl ementById
('frmEmployeePa ssword').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="Authent ication.php" method="get"
onsumbit="javas cript:return validateMe();">

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

<?php
if (isset($error)) {
echo("<strong>< font color=red>**Use rname/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="frmEmploye eNumber"><stron g>Employee Number</strong>:
</label>
&nbsp;&nbsp;&nb sp;
<input type="text" name="frmEmploy eeNumber" id="frmEmployee Number"
maxlength="6" />
<br /> <br />
<label for="frmEmploye ePassword"><str ong>Employee Password</strong>:
</label>
<input type="password" name="frmEmploy eePassword"
id="frmEmployee Password" maxlength="6" />
<br />
<input type="submit" name="Submit" value="Submit" />
<input type="reset" name="Reset" value="Reset" />
</fieldset>
</form>

</body>
</html>

[Michael Winter]

Re: Form Validation and getElementById

On Thu, 18 Nov 2004 05:03:42 GMT, Skippytpe <skippytpe@yaho o.com> wrote:
[color=blue]
> 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. frmEmployeeNumb er.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.[/color]

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="retur n 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['controlNameOrI d']

to reference any control within the form.

For example:

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

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

if(!/^[a-z0-9]{6}$/i.test(elem['frmEmployeePas sword'].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="Authent ication.php" method="get"
onsubmit="retur n 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]
[color=blue]
> <link href="Yellow1.c ss" rel="stylesheet " type="text/css" />[/color]

I'll be mentioning some stylesheet improvements, so you could add them
here.
[color=blue]
> <script type="text/javascript">
> function validateMe(){
>
> var objRegExp = /^[0-9]{6}$/ ;[/color]

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]
[color=blue]
> var objRegExp = /^[a-zA-Z0-9]{6}$/ ;[/color]

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]
[color=blue]
> <form id="login" action="Authent ication.php" method="get"
> onsumbit="javas cript:return validateMe();">[/color]

The javascript: prefix is useless here. You can remove it.
[color=blue]
> <fieldset>
> <h5>
> <legend>Login :
> </legend>
> </h5>[/color]

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>Log in :</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.
*/
}
[color=blue]
> <?php
> if (isset($error)) {
> echo("<strong>< font color=red>**Use rname/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 />");
> }
> ?>[/color]

The FONT element is deprecated in Transitional, and illegal in Strict.
What you should have is something like

<p class="error">U sername/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.
[color=blue]
> <label for="frmEmploye eNumber"><stron g>Employee Number</strong>:
> </label>
> &nbsp;&nbsp;&nb sp;
> <input type="text" name="frmEmploy eeNumber" id="frmEmployee Number"
> maxlength="6" />[/color]

This would be better written as

<label for="formEmploy eeNumber">Emplo yee Number:
<input type="text" name="frmEmploy eeNumber" maxlength="6" />
</label>

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

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.infosystem s.www.authoring.html and ciwa.stylesheet s, too.

[snip]

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[McKirahan]

Re: Form Validation and getElementById

"Skippytpe" <skippytpe@yaho o.com> wrote in message
news:Xns95A4EAC 54A481skippytpe yahoocom@216.77 .188.18...[color=blue]
> 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. frmEmployeeNumb er.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.c ss" rel="stylesheet " type="text/css" />
>
> <script type="text/javascript">
> function validateMe(){
>
> var objRegExp = /^[0-9]{6}$/ ;
> if (objRegExp.test (document.getEl ementById('frmE mployeeNumber') .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.getEl ementById
> ('frmEmployeePa ssword').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="Authent ication.php" method="get"
> onsumbit="javas cript:return validateMe();">
>
> <fieldset>
> <h5>
> <legend>Login :
> </legend>
> </h5>
>
> <?php
> if (isset($error)) {
> echo("<strong>< font color=red>**Use rname/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="frmEmploye eNumber"><stron g>Employee Number</strong>:
> </label>
> &nbsp;&nbsp;&nb sp;
> <input type="text" name="frmEmploy eeNumber" id="frmEmployee Number"
> maxlength="6" />
> <br /> <br />
> <label for="frmEmploye ePassword"><str ong>Employee Password</strong>:
> </label>
> <input type="password" name="frmEmploy eePassword"
> id="frmEmployee Password" maxlength="6" />
> <br />
> <input type="submit" name="Submit" value="Submit" />
> <input type="reset" name="Reset" value="Reset" />
> </fieldset>
> </form>
>
> </body>
> </html>[/color]

Typo!

Change
onsumbit="javas cript:return validateMe();">
to
onsubmit="retur n validateMe();">

[RobB]

Re: Form Validation and getElementById

"McKirahan" <News@McKirahan .com> wrote in message news:<aV_md.353 509$wV.183895@a ttbi_s54>...[color=blue]
> "Skippytpe" <skippytpe@yaho o.com> wrote in message
> news:Xns95A4EAC 54A481skippytpe yahoocom@216.77 .188.18...[color=green]
> > 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. frmEmployeeNumb er.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.c ss" rel="stylesheet " type="text/css" />
> >
> > <script type="text/javascript">
> > function validateMe(){
> >
> > var objRegExp = /^[0-9]{6}$/ ;
> > if (objRegExp.test (document.getEl ementById('frmE mployeeNumber') .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.getEl ementById
> > ('frmEmployeePa ssword').value) ){
> > var retType = true;
> > } else {
> > alert("Please enter a password.");
> > return false;
> > }[/color]
> return retType;[color=green]
> > }
> > </script>
> >
> > </head>
> >
> > <body>
> > <h1>Yellow Design Group - Inventory Control System</h1>
> > <form id="login" action="Authent ication.php" method="get"
> > onsumbit="javas cript:return validateMe();">
> >
> > <fieldset>
> > <h5>
> > <legend>Login :
> > </legend>
> > </h5>
> >
> > <?php
> > if (isset($error)) {
> > echo("<strong>< font color=red>**Use rname/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="frmEmploye eNumber"><stron g>Employee Number</strong>:
> > </label>
> > &nbsp;&nbsp;&nb sp;
> > <input type="text" name="frmEmploy eeNumber" id="frmEmployee Number"
> > maxlength="6" />
> > <br /> <br />
> > <label for="frmEmploye ePassword"><str ong>Employee Password</strong>:
> > </label>
> > <input type="password" name="frmEmploy eePassword"
> > id="frmEmployee Password" maxlength="6" />
> > <br />
> > <input type="submit" name="Submit" value="Submit" />
> > <input type="reset" name="Reset" value="Reset" />
> > </fieldset>
> > </form>
> >
> > </body>
> > </html>[/color]
>
> Typo!
>
> Change
> onsumbit="javas cript:return validateMe();">
> to
> onsubmit="retur n validateMe();">[/color]


Another alternative:

<script type="text/javascript">

function validateMe(els)
{
var val, msg = "", focus_me = null;
val = els.frmEmployee Number.value;
if (/^\s*$/.test(val))
{
msg += "• no Employee Number\n";
focus_me = focus_me || els.frmEmployee Number;
}
else if (!/^\d{6}$/.test(val))
{
msg += "• Employee Number not 6 digits\n";
focus_me = focus_me || els.frmEmployee Number;
}
val = els.frmEmployee Password.value;
if (/^\s*$/.test(val))
{
msg += "• no Employee Password\n";
focus_me = focus_me || els.frmEmployee Password;
}
else if (!/^[A-Z0-9]{6}$/i.test(val))
{
msg += "• Employee Password not 6 digits\n";
focus_me = focus_me || els.frmEmployee Password;
}
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="Authent ication.php" method="get"
onsubmit="retur n validateMe(this .elements)">

What is a sumbit anyway?