Where to learn form validation from beginning?

@phpnoviceMay 23.2006 — #Complete JavaScript form validation is done by combining two levels of client-side validation -- field level and form level -- with normal server-side validation (via ASP or PHP, etc). Note that it is important to include server-side validation because there are ways that your client-side validation can be bypassed (e.g., by spammers). At any rate...

Field level validation is done by using each field's [b]onchange[/b] event as follows:

onchange="return fieldValidation(this)"

Form level validation is done by using the FORM tag's [b]onsubmit[/b] event as follows:

onsubmit="return formValidation(this)"

Both event handlers (functions) should be written using this overall format:

function eventHandler(obj) {
 ...
 if(validation fails) {
 ...
 return false;
 }
 ...
 return true;
 }

The key parts of this format are the [b]return[/b] statements. Returning [b]false[/b] to an event cancels the default action of that event. In the case of [b]onchange[/b], this event fires when the focus is being removed from a form element that has been changed. The default action is to allow the focus to be removed. Thus, cancelling this default action keeps the focus on the form element that is in error. In the case of [b]onsubmit[/b], this event fires when the form is submitted. The default action is to allow the form to continue with the submit. Thus, cancelling this default action keeps the form from submitting in the case of errors. (Note that this event does [B][I][U]not[/U][/I][/B] fire if you incorporate the use of the form's [b]submit()[/b] method in your code.)

Now... A more fleshed out version of the field level validation function would look something like this (this one validating merely for required content):

function fieldValidation(fld) {
 if(/^s*$/.test(fld.value)) {
 alert(fld.name + " is required.");
 if(fld.select) fld.select();
 return false;
 }
 return true;
 }

Lastly, the way that you combine these two validation levels is to also call your field level validation functions from your form level validation function. Thus, the following is a more fleshed out version of the form validation function:

function formValidation(f) {
 var fld;
 if(!fieldValidation(fld=f.elements["myField"])) {
 fld.focus();
 return false;
 }
 return true;
 }

Any questions? ?

Where to learn form validation from beginning?

1 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Where to learn form validation from beginning?

1 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

1 Comments(s) _↴

Also in #JavaScript _↴