Trying to Write a Generic Form Validator

[Weston C]

I'm trying to write a generic/reusable form validator in Javascript...
just something that checks to make sure required fields have a value. By
generic I mean I don't want to explicitly reference the name/id of the
form or the name of any of the data fields within a "validation"
function.

My first shot seems to have some errors in it:

FieldsToValidateByForm = {};
FieldsToValidateByForm['contact'] = ["FirstName",
"LastName","State","Email"];

function validate(form)
{
problemFields = new Array();
returnval = true;
FieldsToValidate = FieldsToValidateByForm[form.id];

for(i=0; i < FieldsToValidate.length; i++) {
fieldInQuestion = form[FieldsToValidate];
if(fieldInQuestion.value.length < 1) //problem spot?
problemFields.push(FieldsToValidate);
}

if(problemFields.length > 0) {
returnval = false;
warn(problemFields); /* tells user they're missing a field,
that's all */
}

return returnval;
}


What I think is happening (not sure) is that the expression
form[fieldsToValidate] is not giving me what I want: a reference to
the object corresponding to the form field with the same name. In
otherwords, I must have some fundamental misunderstanding of how the DOM
works here. Unfortunately, I can't seem to find a good enough reference
to set me straight....

-W

~==~
http://weston.canncentral.org/
Taking Pictures During Dreams
weston8[at]cann8central.org
(remove eights to email me)

 

[Bagbourne]

I'm trying to write a generic/reusable form validator in Javascript...
just something that checks to make sure required fields have a value. By
generic I mean I don't want to explicitly reference the name/id of the
form or the name of any of the data fields within a "validation"
function.

What I think is happening (not sure) is that the expression
form[fieldsToValidate] is not giving me what I want: a reference to
the object corresponding to the form field with the same name. In
otherwords, I must have some fundamental misunderstanding of how the DOM
works here. Unfortunately, I can't seem to find a good enough reference
to set me straight....

Try this:
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/ecma-script-language-bindi
ng.html (I have this saved locally because it's so useful!)

In particular the "Object HTMLDocument" section, and its "forms" property
which is an HTMLCollection (which is also fully documented there)

You should be able to follow the DOM through and figure it out from there...

Nige

 

[John]

I'm trying to write a generic/reusable form validator in Javascript...
just something that checks to make sure required fields have a value. By
generic I mean I don't want to explicitly reference the name/id of the
form or the name of any of the data fields within a "validation"
function.

My first shot seems to have some errors in it:

FieldsToValidateByForm = {};
FieldsToValidateByForm['contact'] = ["FirstName",
"LastName","State","Email"];

function validate(form)
{
problemFields = new Array();
returnval = true;
FieldsToValidate = FieldsToValidateByForm[form.id];

for(i=0; i < FieldsToValidate.length; i++) {
fieldInQuestion = form[FieldsToValidate];
if(fieldInQuestion.value.length < 1) //problem spot?
problemFields.push(FieldsToValidate);
}

if(problemFields.length > 0) {
returnval = false;
warn(problemFields); /* tells user they're missing a field,
that's all */
}

return returnval;
}


What I think is happening (not sure) is that the expression
form[fieldsToValidate] is not giving me what I want: a reference to
the object corresponding to the form field with the same name. In
otherwords, I must have some fundamental misunderstanding of how the DOM
works here. Unfortunately, I can't seem to find a good enough reference
to set me straight....

-W

~==~
http://weston.canncentral.org/
Taking Pictures During Dreams
weston8[at]cann8central.org
(remove eights to email me)

Many ways.

This is available easily from the form object. DOM is just a
distraction.

I strobe through the form elements, inspecting type for how to handle
the object value. For example, a "select-one" <select> object has a
..selectedIndex property, so obj[obj.selectedIndex].value would index a
value. .checked for others....
Something I noticed of ie long ago is that it can lose the form object
reference when being handed another function deeper. So I always
reconstruct the reference within the next function by the sloppy: var
oForm = eval( document[oForm.name] ), which requires the form at least
be named, or use the getElementByName/ID.
One could have the onBlur/onChange inspect the form object element
upon use of that element by the user. If empty or an off checkbox,
then set a global JS flag, maybe bSubmitForm = false.

 

[Richard Cornford]

Something I noticed of ie long ago is that it can lose the
form object reference when being handed another function deeper.
So I always reconstruct the reference within the next function
by the sloppy: var oForm = eval( document[oForm.name] ), which
requires the form at least be named,....

<snip>

Whatever you think might be justifying this operation you are almost
certainly utterly mistaken. In order for this operation to return a
reference to a named form and assign it to the - oForm - variable -
oForm - must start off holding a reference to that form, else the name
will not resolve. That makes the whole operation pointless to start
with. The additional use of the - eval - function demonstrates a
complete lack of understanding of the actions of that function and is
completely futile.

It would be better to understand the actions of the - eval - function
before recommending its use to anyone but, as the use of - eval - is
almost never necessary and its appearance in JavaScript source code is
usually indicative of an ill-conceived approach, it would be better to
never recommend the use of - eval - at all.

Richard.

 

[JavaScript-Coder.com]

Checkout the form validation script located at:
http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
It is a general form validation script.
You can use the script for most of the validations.

Hope this helps..

Prasanth,
http://www.javascript-coder.com
Javascript Coder is a tool that can generate
code for a number of cool JavaScript Features.

 

[Mark Szlazak]

The chapter on form validation from Danny Goodmans "Javascript and DHTML
Cookbook" are online at:

Part 1: http://www.webreference.com/programming/java_dhtml/chap8/1/

Part 2:
http://www.webreference.com/programming/java_dhtml/chap8/2/index.html