The form will include one text field called "Your Name", and a button.
Our validation script will ensure that the user enters their name before the form is sent to the server. Try pressing the Send Details button without filling anything in the "Your Name" field.
You might like to open the source code for this form in a separate window, so that you can refer to it throughout the tutorial.
Form validation is the process of checking that a form has been filled in correctly before it is processed.
For example, if your form has a box for the user to type their email address, you might want your form handler to check that they've filled in their address before you deal with the rest of the form.
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.
At the end, there's a little exercise to keep you busy too!
One point to note about Java Script validation is that it can always be circumvented by the user disabling Java Script in their browser, so for secure validation you'll need to write your validating code in your server-side scripts.
However, for day-to-day use Java Script is a quick and easy way to check over your forms before they're sent to your server.If the user has not completed more than one field, then they will see an alert box appear for each field that is missing.Now you know how to write a form validation script that can handle multiple form fields, including text boxes, radio buttons, drop-down lists and check boxes!Our example script works by validating all the form fields at once.This can be a bit confusing for the user, especially if they've missed out more than one field, as they will get lots of alert boxes appearing and they might forget which fields they need to fill in!We'll also look at how to check other types of fields, such as checkboxes, radio buttons and drop-down lists.