making a portable form-field data validator

[nntp-service.ohio-state.edu]

Hey folks -

I'm a newbie to java script. I'm trying to make a portable data-validator
for fields in an HTML form.

Ideally, it would work something like this:

<input type="text" name="test" onBlur=check_da ta(this.value, "date")>

The script would check the data against its data type (date, number, text)
and then spit out an error if the data wasn't the correct type.

I've seen scripts that check the data when the user hits the 'submit'
button. I would instead prefer to use the onblur event of each field.

To make it portable, it would then return focus to the field that the user
just entered data into.

Where I'm running into problems is referring to the field name. I've tried
referencing "this.parentnod e.name", "this.parentnod e.nodename",
"this.parentele ment.name", etc. to no avail. I would like it to work with NN
6.x and IE5.x, but nowhere have I found a comprehensive guide to what
browser works with what javascript commands.

Can someone point me in the right direction?

[Lasse Reichstein Nielsen]

Re: making a portable form-field data validator

"nntp-service.ohio-state.edu" <lefevre.10@osu .edu> writes:
[color=blue]
> I'm a newbie to java script. I'm trying to make a portable data-validator
> for fields in an HTML form.
>
> Ideally, it would work something like this:
>
> <input type="text" name="test" onBlur=check_da ta(this.value, "date")>[/color]

You must put quotes around the onblur attribute value, i.e.,
<input type="text" name="test" onBlur="check_d ata(this.value, 'date')">

It contains at least one of the characters not allowed in unquoted
attribute values. I can't remember them all, so just quote all
attribute values and you are safe.
[color=blue]
> The script would check the data against its data type (date, number, text)
> and then spit out an error if the data wasn't the correct type.[/color]

How do you recognize a correct date (I.e., what *is* a correct date
for your system)? What is correct text?
[color=blue]
> I've seen scripts that check the data when the user hits the 'submit'
> button. I would instead prefer to use the onblur event of each field.[/color]

They do that for a reason! Users don't like to be interrupted while
they are typing.
[color=blue]
> To make it portable, it would then return focus to the field that the user
> just entered data into.[/color]

Warning! If you capture the focus in this way, the user has only two
options if they want to change focus: write something correct or close
the browser. Capturing users like this can be very annying to them.
[color=blue]
> Where I'm running into problems is referring to the field name. I've tried
> referencing "this.parentnod e.name", "this.parentnod e.nodename",
> "this.parentele ment.name", etc. to no avail.[/color]

Inside the function, "this" refers to the global object, not the input
element or the form. I don't know what "parentnode " should refer to,
do you mean "parentNode "?

If the function needs access to the form element, not just its value,
then you should pass the element as an argument to it. I.e.:

onblur="check_d ata(this, 'date')"

and then a check_data function:
---
function check_data(inpu t,type) {
var success;
var value = input.value;
switch(type) {
case "date": // format yyyy/mm/dd
success = /^\d{4}\/\d{2}\/\d{2}$/.test(value);
break;
cast "number": // one or more digits
success = /^\d+$/.test(value);
break;
cast "text": // one or more digits are letters (or whatever)
success = /^\w+$/.test(value);
break;
default:
success = false; // what?
break;
}
if (!success) {
alert("Input named '"+input.name+" ' incorrect. Must be "+type+"!") ;
input.style.bor der="2px solid red";
input.focus(); // but please don't do this!
} else {
input.style.bor der="";
}
return success
}
---
[color=blue]
> I would like it to work with NN
> 6.x and IE5.x, but nowhere have I found a comprehensive guide to what
> browser works with what javascript commands.[/color]

What you need for this problem will work in all modern browsers. They
both support Javscript (i.e., ECMAScript) perfectly. The differences
are in the DOM. For forms, there are no significant differences.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Lee]

Re: making a portable form-field data validator

nntp-service.ohio-state.edu said:[color=blue]
>
> Hey folks -
>
>I'm a newbie to java script. I'm trying to make a portable data-validator
>for fields in an HTML form.
>
>Ideally, it would work something like this:
>
><input type="text" name="test" onBlur=check_da ta(this.value, "date")>[/color]

<input type="text" name="test" onChange="check _data(this, 'date')">

1. Don't validate onBlur. There are too many things that can
cause the onBlur handler to fire before the person is done
entering data into the field. As a simple example, they may
begin entering the date, and realize that they need to check
with a calendar application. There are other problems with
using onBlur, too.

2. Enclose the attribute value in quotes, using single quotes
for the second level.

3. By passing <this> instead of <this.value>, your check_data()
function will be able to access other attributes of the
form element, including its name, and will be able to set
focus to it directly, instead of by name.

Also, since you don't know that the person has Javascript enabled,
or if they may have chosen to bypass your client-side audits, you
should also audit the values on the server, if it's important that
they be correct. Auditing on the client side should only be for
the convenience of the visitor.