Great for "required fields" such as email addresses!
This tutorial will show you how to create a Java Script-enabled form that checks whether a user has filled in the form correctly before it's sent to the server. First we'll explain why form validation is a useful thing, and then build up a simple example form, explaining things as we go along.
HTML Code of the Sample Registration Form is the external Java Script file which contains the Java Script ocde used to validate the form. Notice that for validation, the Java Script function containing the code to validate is called on the on Submit event of the form.
For the sake of demonstration, we have taken five countries only. CSS Code of the Sample Registration Form The code above checks whether a sex is selected. If Male or Female is selected, it generates an alert saying that the form is successfully submitted and it reloads the form.
Server-side validation is more secure but often more tricky to code, whereas client-side (Java Script) validation is easier to do and quicker too (the browser doesn't have to connect to the server to validate the form, so the user finds out instantly if they've missed out that required field! In this tutorial we'll build a simple form with client-side Java Script validation.
You can then adapt this form to your own requirements.
At the end, there's a little exercise to keep you busy too!
It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup.
Flowchart: Here is the entire Java Script used for validation of the form.
function form Validation() function userid_validation(uid,mx,my) function passid_validation(passid,mx,my) function all Letter(uname) function alphanumeric(uadd) function countryselect(ucountry) function allnumeric(uzip) function Validate Email(uemail) function validsex(umsex,ufsex) Flowchart: file_download Download the validation code from here.
Following pictorial shows in which field, what validation we want to impose.
How would we set those validations We will create Java Script functions (one for each input field whose value is to validate) which check whether a value submitted by user passes the validation.