473,382 Members | 1,399 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 software developers and data experts.

Form Validation and getElementById

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
3 2827
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
"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
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

72
by: Stephen Poley | last post by:
I have quite often (as have probably many of you) come across HTML forms with irritating bits of Javascript attached. The last straw on this particular camel's back was a large form I was asked to...
12
by: CJ | last post by:
Why won't this work? I am passing the name of the form (I have two that use this validation script) but I keep getting an error. Error reads: "document.which_form.name is null or not an object" ...
3
by: Robert Smith | last post by:
I have a very basic form validation script, which wont work due to XHTML Strict not allowing me to use the name attribute on a form. Here is part of my code: if...
7
by: x muzuo | last post by:
Hi guys, I have got a prob of javascript form validation which just doesnt work with my ASP code. Can any one help me out please. Here is the code: {////<<head> <title>IIBO Submit Page</title>...
7
ak1dnar
by: ak1dnar | last post by:
Hi, I got this scripts from this URL There is Error when i submit the form. Line: 54 Error: 'document.getElementbyID(....)' is null or not an object What is this error. Complete Files
15
by: MKO | last post by:
Hi guys I'm having a little trouble with form validation, I can get the entire form to validate without problems (i.e. when all fields set to required & valid data is entered) but can't get it to...
2
by: plumba | last post by:
Ok, another problem... A bit querky this one.. My form calls an onsubmit function to check fields for completion (validation check). Here is a breakdown version of the form: <html>...
13
by: Andrew Falanga | last post by:
HI, Just a warning, I'm a javascript neophyte. I'm writing a function to validate the contents of a form on a web page I'm developing. Since I'm a neophyte, this function is quite simple at...
3
by: PrabodhanP | last post by:
I hv following javascript form validation code works in IE but not in Mozilla-Firefox ...please suggest <script type="text/javascript"> function IsNumeric(strString) // check for valid...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.