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

Best form validation tutorial?

P: n/a
Hello all!

As embarrassing as it is to admit this, I've been designing db driven
websites using javascript and vbscript for about 6-7 years now, and I
am *horrible* at form validation.

To be honest I usually hire someone to do it for me, grab predone
scripts and kind of hack out the parts that I need, or just do very
minimal validation (e.g. this is numeric, this is alpha-numeric, etc.)

My latest project is 50+ asp pages, has about a zillion forms, and the
wife of the guy who normally helps me with this stuff just had a baby.
He was scheduled for this project, but he's not available. I've been
struggling through it and it's almost done, but it makes me realize
it's time to break down and learn how to properly validate any sort of
form field based on any set of parameters.

Can anyone recommend a decent/complete tutorial online?

Better late than never.

Julie

Mar 19 '06 #1
Share this Question
Share on Google+
9 Replies


P: n/a
ju**********@gmail.com said the following on 3/18/2006 9:33 PM:
Hello all!

As embarrassing as it is to admit this, I've been designing db driven
websites using javascript and vbscript for about 6-7 years now, and I
am *horrible* at form validation.

To be honest I usually hire someone to do it for me, grab predone
scripts and kind of hack out the parts that I need, or just do very
minimal validation (e.g. this is numeric, this is alpha-numeric, etc.)

My latest project is 50+ asp pages, has about a zillion forms, and the
wife of the guy who normally helps me with this stuff just had a baby.
He was scheduled for this project, but he's not available. I've been
struggling through it and it's almost done, but it makes me realize
it's time to break down and learn how to properly validate any sort of
form field based on any set of parameters.

Can anyone recommend a decent/complete tutorial online?


You have found it. comp.lang.javascript, the archives and c.l.j's FAQ
can not be beaten when it comes to wanting to know something. If you ask
a question and get a wrong answer, you can bet it will be corrected very
shortly. That can not be said for any web based tutorial.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Mar 19 '06 #2

P: n/a
Hey, Randy - I've actually *read* the faq (several times over the
years). It really doesn't have much, validation-wise, even though it's
great for me for the errors that I make that are obvious to everyone
but me!

Is there something I am missing, so far as validation in the faq?

Thanks

Mar 19 '06 #3

P: n/a
ju**********@gmail.com said the following on 3/19/2006 12:44 AM:

Please quote what you are replying to.

If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.
<URL: http://www.safalra.com/special/googlegroupsreply/ >
Hey, Randy - I've actually *read* the faq (several times over the
years).
Then you have read the part about quoting what you are replying to? :)
It really doesn't have much, validation-wise, even though it's
great for me for the errors that I make that are obvious to everyone
but me!
Is there something I am missing, so far as validation in the faq?


Validation-wise itself, probably not. It does cover how to get a
reference/value of any type of form input. Once you have that value, you
want to validate it and the FAQ has links to regex articles. After that,
it's time to use the brain and ask questions.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Mar 19 '06 #4

P: n/a

Randy Webb wrote:
If you want to post a followup via groups.google.com, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.


Thanks, Randy - I didn't know that - my satellite ISP doesn't include
newsgroups, so I use Google.
Is there something I am missing, so far as validation in the faq?


Validation-wise itself, probably not. It does cover how to get a
reference/value of any type of form input. Once you have that value, you
want to validate it and the FAQ has links to regex articles. After that,
it's time to use the brain and ask questions.


Well, I am still looking for a tutorial so I know which questions to
ask. I have some great regex links, it's just pulling it all together
that seems to be a problem. If you search for "form validation
tutorial" on google there are 1600 hits. I'd like to narrow it down a
bit and find something fairly comprehensive.

So again, I ask, does anyone know of a really good javascript
validation tutorial on the web?

Thanks,

Julie

Mar 19 '06 #5

P: n/a
ju**********@gmail.com wrote:
So again, I ask, does anyone know of a really good javascript
validation tutorial on the web?


That question is too vague to get any good answers.

Describe exactly what such a "tutorial" would cover. What exactly are you
trying to achieve? How do you want to accomplish it?

Your question is similar to asking" does anyone know of a really good
car-repair tutorial on the web?"
There are many ways to do it, many areas to focus on, and no single
solution. So the first step is trying to really figure out what it is that
you want :)

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Mar 19 '06 #6

P: n/a

Matt Kruse wrote:
ju**********@gmail.com wrote:
So again, I ask, does anyone know of a really good javascript
validation tutorial on the web?
That question is too vague to get any good answers.


:)
Describe exactly what such a "tutorial" would cover. What exactly are you
trying to achieve? How do you want to accomplish it?
Well, as I said initially, I'm trying to learn how to write validation
routines for any form based on any set of parameters. (I guess I didn't
say in Javascript, but that is what I meant. I am not trying to achieve
a particular task - as I said, the site I am working on is about done -
I am trying to learn the right way to do validation.

If someone asked me for a good asp tutorial on learning to read from
and write to databases, also a pretty generic question, I could point
out several that I thought were pretty clear when I was first learning.
Your question is similar to asking" does anyone know of a really good
car-repair tutorial on the web?"
There are many ways to do it, many areas to focus on, and no single
solution. So the first step is trying to really figure out what it is that
you want :)
Not trying to be obstinate, honest, but "trying to really figure out"
what I want to learn at this point, is kind of like asking someone who
wants to learn about car repair what is wrong with their car: they are
trying to learn about car repair to find out what is wrong with their
car. (At least I am guessing so - I don't drive :D - and I'd go to
repairmanual.com and buy a manual.)

Regardless, I guess I will just try to winnow through those 1600 Google
hits. I'd just assumed, wrongly apparently, that someone on the list
had probably learned about validation through an online tutorial, but I
guess you guys are all a bit better than that!

Thanks, Matt

Julie

P.S. Love your little calendar - is used on the site I'm working on.
--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com


Mar 19 '06 #7

P: n/a
ju**********@gmail.com said the following on 3/19/2006 2:42 PM:
Matt Kruse wrote:
ju**********@gmail.com wrote:
So again, I ask, does anyone know of a really good javascript
validation tutorial on the web? That question is too vague to get any good answers.


:)
Describe exactly what such a "tutorial" would cover. What exactly are you
trying to achieve? How do you want to accomplish it?


Well, as I said initially, I'm trying to learn how to write validation
routines for any form based on any set of parameters. (I guess I didn't
say in Javascript, but that is what I meant. I am not trying to achieve
a particular task - as I said, the site I am working on is about done -
I am trying to learn the right way to do validation.


There are three parts to form validation:

1) Getting the value you want to validate.
2) Comparing that value to what you expect.
3) Reacting to the results from that comparison.
1) is covered in the FAQ as to how to get the value of any form element.

2) This is the hardest part of it and the most time consuming. Not the
comparison, but the "what you expect" part of it. And "what you expect"
is so widely varied that there is no "generic" solution to it. It is
very specific to a specific situation. You can find tutorials on the web
on how to validate a US Postal Code, a US Phone Number, etc. but when
you move into an international range then it becomes almost impossible
to validate what a valid phone number is or what a valid postal code is.
That is the part that makes it impossible to give a generic solution.

Another example is that if you want an answer that has a certain format
then the next person that wants to validate a different format then your
solution is useless to them

3) Quite trivial. You either return true or false based on the comparison.

Some tips though:

ALWAYS validate using the onsubmit of the form element. That is probably
the #1 mistake people make in validating forms. <form onsubmit="return
validate(this)" .....> where validate is your validation function.

If you want to modify/validate an input as the user goes then use the
onchange, not the onblur, event handler. Mistake #2.
If someone asked me for a good asp tutorial on learning to read from
and write to databases, also a pretty generic question, I could point
out several that I thought were pretty clear when I was first learning.
How to access form controls is a generic question. How to validate a
form isn't.

<snip>
Regardless, I guess I will just try to winnow through those 1600 Google
hits. I'd just assumed, wrongly apparently, that someone on the list
had probably learned about validation through an online tutorial, but I
guess you guys are all a bit better than that!


We are not a "little bit better" but rather I think the word "cynical"
describes it better. But with regards to form validation, even after
winnowing through 1600 Google hits you will still have questions. The
best place to start? Regular Expressions and this newsgroup.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Mar 19 '06 #8

P: n/a
"ju**********@gmail.com" <ju**********@gmail.com> writes:
Well, I am still looking for a tutorial so I know which questions to
ask. I have some great regex links, it's just pulling it all together
that seems to be a problem. If you search for "form validation
tutorial" on google there are 1600 hits. I'd like to narrow it down a
bit and find something fairly comprehensive.

So again, I ask, does anyone know of a really good javascript
validation tutorial on the web?


No tutorial, but then it's not really a big subject.

Rule one of client-side validation: It can be bypassed.
If your server depends on its input being in a certain format, it
should test it itself. Client-side validation is only a help to the
user, allowing him to get instant feedback instead of waiting for a
server request.

That also means that clint-side validation should try to accept
the same values as the server-side validation. If that is not possible
(some values might need to be compared to others only available on
the server), the client-side validation should err on the side of
permitting too much, not too little.

You can choose to validate a field when it is changed (each keypress or
when leaving the field) or all the fields when the form is submitted.
The last option is the most common, the simplest, and often sufficient.

To validate a form when it is to be submitted, add a call to the
validation in the form element's onsubmit handler:

<form action="..." method="..." onsubmit="return validateForm(this);">

There are many other ways to call a validation method, all inferior to
this one, which means that the validation is called independently of
how the user triggers the submit (submit button or pressing return
in a field or something else) but also that the form submit still works
with Javascript turned off.

The function can do whatever it needs to validate the fields, and it
can report errors in many different ways too. I recommend showing the
error messages on the page, not just in an alert, since that goes away
before the user can start editing. One solution is to add a red border
to the erroneous fields and adding the error message to the title
attribute.
An example validation function:
---
<script type="text/javascript">
function markInvalid(field, message) {
field.style.border = "2px solid red";
field.title = field.title.replace(/ERROR:[\s\S]*$/,"") + "ERROR:\n" + message;
}
function markValid(field) {
field.style.border = "";
field.title = field.title.replace(/ERROR:[\s\S]*$/,"");
}
function validateForm(theForm) {
var elems = theForm.elements;
var errors = false;
var phoneField = elems['phone'];
if (!/^\d{6,}$/.test(phoneField.value)) {
markInvalid(phoneField, "Phone number must be supplied "+
"(at least six digits and no non-digits)");
errors = true;
} else {
markValid(phoneField);
}
var agreeField = elems['agreement'];
if (!agreeField.checked) {
markInvalid(agreeField, "You must agree to the Terms of Service");
errors = true;
} else {
markValid(agreeField);
}
if (errors) {
alert("Form contains errors. These must be corrected before submission.\n"+
"Errors are marked with red border. Hoover for explanation of error");
}
return !errors;
}
</script>
----

It matches a form with at least the following fields:
---
<form action="" onsubmit="return validateForm(this);">
<label for="phoneFieldId">Phone: </label>
<input type="text" name="phone" id="phoneFieldId"
title="Enter your contact phone number (6+ digits)"><br>
<label for="agreeFieldId">I agree to the Terms of Service</label>
<input type="checkbox" name="agreement" id="agreeFieldId"
title="Check to mark your agreement"> <br>
<input type="submit" value="I submit">
</form>
---

Good luck!
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Mar 19 '06 #9

P: n/a
JRS: In article <11*********************@p10g2000cwp.googlegroups. com>,
dated Sat, 18 Mar 2006 18:33:11 remote, seen in
news:comp.lang.javascript, ju**********@gmail.com posted :

As embarrassing as it is to admit this, I've been designing db driven
websites using javascript and vbscript for about 6-7 years now, and I
am *horrible* at form validation. Can anyone recommend a decent/complete tutorial online?

Most form validation code is bloated.

<URL:http://www.merlyn.demon.co.uk/js-valid.htm> is not a tutorial, but
in its "A Scheme for Validation of the Fields of Forms" it does
demonstrate an effective non-bloated parameter-driven validation
routine.

The user creates, as a literal, an Object of two elements; one
identifies the form, the other is an array of objects one per element of
the form to be validated. Each of those objects contains the identifier
of the element, its string-name, a string describing in natural language
the requirement, an optional RegExp to test its pattern, and optionally
a function and its parameters for further checks.

The "validate" button then just calls the general validation function
with the Object as its one parameter.

The page also has some material on RegExps.

--
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.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Mar 20 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.