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

Batch form validation

P: n/a
Hello, all. I'm currently trying to write a script that will perform
form validation upon submission. I know that more validation should be
performed on the server's side...this is just a test to see if I can
get the client side to work.

My problem is that I'm trying to make a validator that is 100%
separated from the XHTML code. I don't even want an event handler
assignment in the form. Unfortunately, I can't see how to grab a hold
of the form and pass it down to my subroutines. The code I'm using,
which is all placed in a seperate .js file, is below:

var W3CDOM = (document.createElement && document.getElementsByTagName);

function init(){
if (!W3CDOM) return;
var inputform = document.getElementById('inputform');
inputform.onsubmit = validate;
}

function validate(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
var elem = (event.target) ? event.target : ((event.srcElement) ?
event.srcElement : null);

if(elem){
if(isNotEmpty(elem.name)){
if(isName(elem.name)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

return false;
}

function isNotEmpty(elem){
str = elem.value;
re = /.+/;

if(!str.match(re)){
return false;
alert(elem + " is empty!");
}

else{
return true;
}
}

function isName(elem){
str = elem.value;
re = /[a-zA-Z]*([ a-zA-Z]+\-?)*/;

if(!str.match(re)){
return false;
alert(elem + " is not a name!");
}

else{
return true;
}
}

function len16(elem){
str = elem.value;
re = /\b.{16}\b/;

if(!str.match(re)){
return false;
alert("Your password is not 16 characters long!");
}

else{
return true;
}
}

function validEmail(elem){
str = elem.value;
re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

if(!str.match(re)){
return false;
alert("You did not enter a valid e-mail address!");
}

else{
return true;
}
}

window.onload = init;

My XHTML is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<script type="text/javascript" src="validateform.js"></script>
<style type="text/css">

form p label {
font: bold 1em Arial, Helvetica, sans-serif;
float: left;
width: 30%;
}

form p {
clear: left;
margin: 0;
padding: 5px 0 0 0;
}

input.txt {
width: 200px;
}

fieldset.narrow {
width: 450px;
}

</style>

</head>

<body>

<form name="inputform" id="inputform" method="post" action="">
<fieldset class="narrow"><legend>Please input your
information</legend>
<p><label for="name">Name:</label><input id="name" type="text"
class="txt" /></p>
<p><label for="password">Password:</label><input id="password"
type="password" class="txt" /></p>
<p><label for="email">E-mail Address:</label><input id="email"
type="text" class="txt" /></p>
<p><input type="submit" name="submit" id="submit" value="Submit"
/></p>
</fieldset>
</form>
</body>

</html>

Like I said before, it doesn't appear that my script is getting the
form as I don't even get the alert dialogue boxes to popup when I try
submitting an empty form. Any ideas on what I'm doing wrong?

Thanks. :)

Sep 1 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a

kevinmaj...@gmail.com wrote:
function validate(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
var elem = (event.target) ? event.target : ((event.srcElement) ?
event.srcElement : null);

if(elem){
if(isNotEmpty(elem.name)){
if(isName(elem.name)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

return false;
}
[snip]

Your main problem I would surmise is with the validate function. When
you submit your form, although you have assigned an event handler to it
via javascript, there is no 'evt' being passed to your function. Nor
will it ever. Since you don't want to actually hard code the event
handler on your form, then you can do the following instead with your
function:

function validate()
{
var myForm = document.forms["inputform"];

if(myForm)
{
if(isNotEmpty(myForm.elements["name"]))
{
//etc. etc.
}
}
}

You can also get rid of all your id's in your form and just assign the
name attribute.

Sep 1 '06 #2

P: n/a

web.dev wrote:
kevinmaj...@gmail.com wrote:
function validate(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
var elem = (event.target) ? event.target : ((event.srcElement) ?
event.srcElement : null);

if(elem){
if(isNotEmpty(elem.name)){
if(isName(elem.name)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

return false;
}

[snip]

Your main problem I would surmise is with the validate function. When
you submit your form, although you have assigned an event handler to it
via javascript, there is no 'evt' being passed to your function. Nor
will it ever. Since you don't want to actually hard code the event
handler on your form, then you can do the following instead with your
function:

function validate()
{
var myForm = document.forms["inputform"];

if(myForm)
{
if(isNotEmpty(myForm.elements["name"]))
{
//etc. etc.
}
}
}

You can also get rid of all your id's in your form and just assign the
name attribute.
Sep 1 '06 #3

P: n/a
web.dev wrote:
kevinmaj...@gmail.com wrote:
function validate(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
var elem = (event.target) ? event.target : ((event.srcElement) ?
event.srcElement : null);

if(elem){
if(isNotEmpty(elem.name)){
if(isName(elem.name)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

return false;
}

[snip]

Your main problem I would surmise is with the validate function. When
you submit your form, although you have assigned an event handler to it
via javascript, there is no 'evt' being passed to your function. Nor
will it ever. Since you don't want to actually hard code the event
handler on your form, then you can do the following instead with your
function:

function validate()
{
var myForm = document.forms["inputform"];

if(myForm)
{
if(isNotEmpty(myForm.elements["name"]))
{
//etc. etc.
}
}
}

You can also get rid of all your id's in your form and just assign the
name attribute.
Unfortunately, that doesn't seem to be working either. My updated code
(with DOM Level 0 syntax for the form elements):

function init(){
if (!W3CDOM) return;
var inputform = document.getElementByName('inputform');
inputform.onsubmit = validate;
}

function validate(){
var form = document.getElementByName('inputform');
if(form){
if(isNotEmpty(form.name)){
if(isName(form.name)){
if(isNotEmpty(form.password)){
if(len16(form.password)){
if(isNotEmpty(form.email)){
if(validEmail(form.email)){
return true;
}
}
}
}
}
}
}

return false;
}

I'm curious, why wouldn't an event be passed through the handler to the
function its assigned (inputform.onsubmit = validate;)? And, more to
the point, why wouldn't the contents of the inputform variable be
passed to the function in that assignment as well? I'm kinda lost....

Sep 1 '06 #4

P: n/a
Well, judging by what some debugging alert dialogue boxes are telling
me, I'm finally getting a handle on the form after the submit button is
clicked. Now, for some reason, it appears as though its inputs aren't
being passed to the subroutines correctly. I'm currently using the
following code (debugging alerts removed and I changed elem.name to
elem.username to avoid any naming conflicts -- my XHTML was adjusted
accordingly):

/* code start */
var W3CDOM = (document.createElement && document.getElementsByTagName);

function init(){
if (!W3CDOM) return;
var inputform = document.getElementById('inputform');
inputform.onsubmit = validate;
}

function validate(evt){
evt = (evt) ? evt : ((event) ? event : null);

if(evt){
var elem = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);

if(elem){
if(isNotEmpty(elem.username)){
if(isName(elem.username)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

else {
return false;
}
}

function isNotEmpty(elem){
str = elem.value;
re = /.+/;

if(!str.match(re)){
return false;
alert(elem.id + " is empty!");
}

else{
return true;
}
}

function isName(elem){
str = elem.value;
re = /[a-zA-Z]*([ a-zA-Z]+\-?)*/;

if(!str.match(re)){
return false;
alert(elem.value + " is not a name!");
}

else{
return true;
}
}

function len16(elem){
str = elem.value;
re = /\b.{16}\b/;

if(!str.match(re)){
return false;
alert("Your password is not 16 characters long!");
}

else{
return true;
}
}

function validEmail(elem){
str = elem.value;
re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

if(!str.match(re)){
return false;
alert("You did not enter a valid e-mail address!");
}

else{
return true;
}
}

window.onload = init;
/* code end */

In the validate function, the elem variable IS getting the form id upon
form submission. I've also been able to verify that it can see its
inputs, so something like alert(elem.username.id); will correctly
output the id of that input element.

So, since the elem variable is being assigned correctly after the event
is captured, why aren't the subroutines working at all? I don't even
get the alert dialogue boxes for failed validation to appear when I try
submitting an empty form.

Sep 1 '06 #5

P: n/a
JRS: In article <11**********************@m73g2000cwd.googlegroups .com>
, dated Fri, 1 Sep 2006 15:09:38 remote, seen in
news:comp.lang.javascript, ke*********@gmail.com posted :
if(elem){
if(isNotEmpty(elem.username)){
if(isName(elem.username)){
if(isNotEmpty(elem.password)){
if(len16(elem.password)){
if(isNotEmpty(elem.email)){
if(validEmail(elem.email)){
return true;
}
}
}
}
}
}
}
}

else {
return false;
}
}
More readable to use a series of if (!OK) return false followed by
return true.
>function isNotEmpty(elem){
str = elem.value;
re = /.+/;

if(!str.match(re)){
return false;
alert(elem.id + " is empty!");
The alert will never be executed; put it before return.
}

else{
return true;
}
else is not needed after return. Return is not like Result.
>}
>function isName(elem){
str = elem.value;
re = /[a-zA-Z]*([ a-zA-Z]+\-?)*/;
Use the i flag.
Some faults are repeated later.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.
Sep 2 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.