Form Validation on the Client Side

This is an article discussion thread for discussing the SitePoint article, “Form Validation on the Client Side

well, i really find ur site interesting and it solves my lot of problems…i do join ur forum as i m new to web programming and need lot of help and i feel u have a lot of active members

I only read the first page of this article so can’t comment on the rest.

However, using Javascript alerts for validation errors is a big no no in terms of usability and accessibility. Form errors should be displayed IN PAGE, all at the same time, and with relevant fields highlighted so the user can move around the form correcting fields without having to re-validated the form time after time.

No fair, Mr Anonymous! He specifically says at the start of the article server-side validation IS STILL REQUIRED. In fact it is a usability yes YES to do validation on the client side for most users, as long as your code fails “gracefully” and is backed up by a layer of server-side validation for those who need it.

I think this is a good tutorial! :slight_smile:

I occasionally get into arguments over this one. I like to process syntactically validated form data within the script that contains the form so I can highlight errors for the user that are discovered at the server end.

On the other hand, for simple syntactic/typographical errors (phone number, ZIP codes, CC numbers, e-mail addresses), I believe that an alert that re-focuses the user on the errant field without unduly interrupting the user’s experience is a valid use of JavaScript. I’m sure we’ve all encountered forms written by people whose idea of a valid phone number format is different than our own. I’d rather a) see an example of what they think is correct, and b) have the client keep me at it until I get it right. A more subtle example would be where the contents of one field (a radio or checkbox) requires or excludes another. A “smart” form is better than rejecting my information after submitting it, so I guess I’m really arguing a different point: catching input errors as they occur, not after the user thinks the form has been successfully completed.

For another excellent tutorial on javascript client-side validation that includes 4 types of validation (email, empty, digit, value) see http://www.echoecho.com/jsforms.htm

It also explains how to validate the entire form at once, or on a field-by-field basis as the form is completed.

There’s a mistake in the first validateString function:

 field.value.max > max

should read:

 field.value.length > max

Overall, however, I found this article quite helpful as an intro to js validation!