Browse DevX
Sign up for e-mail newsletters from DevX


Automate Your Form Validation-6 : Page 6




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Write the Validation Routine
Up to this point, all the code you've seen has been generic, but the validator() validation routine below is dependent on the controls in the form. You'll need to write a custom version of this function for each form you want to validate. Call the validator() function from the form's onSubmit event. If the data passes the test, reformat it if necessary, and then submit the form. In the example, I've set the action attribute to "javascript:void(0)" which means "do nothing," In other words, the example form never submits. Instead, I'll replace the on-screen fields with the formatted values. You should change that the action attribute so the form submits the validated and formatted data to your server.

Add the following code to your page:

//Form Validator function validator(form){ if(notEmpty(form.txtNonEmpty.value)==false){ alert("Field is required."); form.txtNonEmpty.focus(); return false; } if(validateInteger(form.txtInteger.value)==false){ alert("Enter an integer."); form.txtInteger.focus(); return false; } if(validateFloat(form.txtFloat.value)==false){ alert("Enter a decimal."); form.txtFloat.focus(); return false; } if(validateUSPhone(form.txtPhone.value)==false){ alert("Enter a valid phone number."); form.txtPhone.focus(); return false; } form.txtPhone.value = formatPhone(form.txtPhone.value); if(validateSSN(form.txtSSN.value)==false){ alert("Enter a valid social security number."); form.txtSSN.focus(); return false; } form.txtSSN.value = formatSSN(form.txtSSN.value); if(validateZip(form.txtZip.value)==false){ alert("Enter a valid zip code."); form.txtZip.focus(); return false; } form.txtZip.value = formatZip(form.txtZip.value); if(validateCC (form.txtCC.value,form.txtCCType.options [form.txtCCType.selectedIndex].value)==false){ alert("Enter a valid credit card."); form.txtCC.focus(); return false; } form.txtCC.value = formatCC (form.txtCC.value,form.txtCCType.options [form.txtCCType.selectedIndex].value); if(validateDate(form.txtDate.value)==false){ alert("Enter a valid date."); form.txtDate.focus(); return false; } form.txtDate.value = formatDate(form.txtDate.value,"MM/DD/YY"); if(validateEMail(form.txtEMail.value)==false){ alert("Enter a valid E Mail address."); form.txtEMail.focus(); return false; } form.txtEMail.value = strip(" \n\r\t",form.txtEMail.value); }

That's it! Each conditional block validates the text entered into one of the form's fields. If the entry passes the test, the validator routine reformats the data and replaces the user-entered text in the control with the formatted data. If any test fails, the routine halts the submission process, and displays an appropriate error message. Finally, for user convenience, the routine sets the focus to the offending control.

I hope this example sets you off in the right direction when validating data. It includes validation rules for many common tasks. If you take away one thing from this example, make sure that you understand that your validation scripts are only as good as the rules you create.

Tom Duffy, DevX's JavaScript Pro, is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the College's in-house Web design studio.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date