473,379 Members | 1,530 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > form validation and getelementbyid

Join Bytes to post your question to a community of 473,379 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 2826
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
New Post

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

72
Javascript form validation - comments please
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...
Javascript
12
Form name not working
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" ...
Javascript
3
XHTML Strict and Javascript Form Validation
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...
Javascript
7
javascript form validation which just doesnt work with my ASP code. Can any one help me out please.
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>...
Javascript
7
ak1dnar
Error in Form Validation PHP/AJAX
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
Javascript
15
Form Validation
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...
Javascript
2
IE6 ignores my form validation handler
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>...
Javascript
13
How to exit a form validation function so that the form isn'tsubmitted
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...
Javascript
3
javascript form validation code works in IE but not in Mozilla-Firefox
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...
Javascript
1
Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud
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...
General
0
Wordpress or something else?
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
Content Management Systems
0
One-click Importing Excel Data into a*Database
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...
Microsoft Excel
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
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,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Batch import of multiple excel files into the database
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...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!