Form Validation and getElementById

S

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.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('frmEmployeeNumber').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>
 
M

Michael Winter

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.
Click to expand...

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" />
Click to expand...

I'll be mentioning some stylesheet improvements, so you could add them
here.
<script type="text/javascript">
function validateMe(){

var objRegExp = /^[0-9]{6}$/ ;
Click to expand...

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}$/ ;
Click to expand...

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();">
Click to expand...

The javascript: prefix is useless here. You can remove it.
<fieldset>
<h5>
<legend>Login :
</legend>
</h5>
Click to expand...

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 />");
}
?>
Click to expand...

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" />
Click to expand...

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 />
Click to expand...

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
 
M

McKirahan

Skippytpe said:
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('frmEmployeeNumber').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>
Click to expand...

Typo!

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

RobB

McKirahan said:
Skippytpe said:
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('frmEmployeeNumber').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>
Click to expand...

Typo!

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


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?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

form validation 1
How to store data from a sign up form on a website into an sql databse 1
Login form no longer working 2
action_page.php form 2
DOM form validation and troubles with FF... 9
Batch form validation 5
Why is this WordPress comments form not submitting? 1
Check forms With JavaScript 1

Members online

Total: 17 (members: 2, guests: 15)
Robots: 81

Forum statistics

Threads
473,780
Messages
2,569,608
Members
45,252
Latest member
MeredithPl

Latest Threads

Top