show page contents
TopLimitationsonsubmitForm methods and propertiesAccessing the form elementsDetermining valuesTexts, textareas and hidden fieldsSelect boxesOld browsersCheckboxesRadio buttons
show site navigation
Loading site navigation; please wait...See section 8J of the book. However, this page contains a more complete overview of how to write a basic form validation script.
On this page I give the code you need for checking user input in a form. Using these bits of code, you can write your own scripts to validate forms
I can't give you a complete script, because each form and each check are different. You'll have to use the elements I explain on this page to build your own script. I created an example form and script that you can study to get the hang of it.On this page I discuss the limitations of using JavaScript to check a form, then I'll explain the onsubmit event handler, followed by the few methods and properties of the form itself. Then it's time for accessing the form elements and the specific syntax for accessing the user defined value of form elements.
See also Jeff Howden's excellent article Forms & JavaScript Living Together in Harmony for some of the most common usability errors and their solutions.
Limitations
First of all, you should have a clear idea of what happens when a user submits a form that has a JavaScript validation script:- The form is checked by a JavaScript like the one described below. If the script finds a mistake the submission is halted here. The user sees an alert and is asked to re-enter some data.
- If nothing is wrong—or if JavaScript is disabled—the form is sent to the server and is processed by a CGI script.
- If the CGI script finds a mistake it generates some HTML with an error message and sends it back to the user. In this case the user has to go back to the form, re-enter some values and again submit it.
- If no mistakes are found, the CGI script does whatever it has to do with the data and directs the user to a Thank You page.
The JavaScript check is very useful in addition to the CGI check because it can catch mistakes before the form is actually sent to the server. Thus the user doesn't have to use his back button to return to the form, something that may cause confusion, and then search for the incorrect form field, which may cause even more confusion. Therefore the JavaScript check is more user friendly than the CGI check.
In addition, when you use JavaScript the server doesn't need to spend quite so much time in error handling and is thus a little quicker. This only matters if you have lots and lots of forms, but it's good to keep it in mind.
So JavaScript is not a fail-safe method of catching mistakes, but it is very useful as an addition to CGI checks since it lightens the load on the server and is more user friendly. Therefore I recommend using both JavaScript form checks and CGI form checks. This way, you get both user friendliness and security.
onsubmit
When using JavaScript to check a form, the first thing you need is theonsubmit
event handler. This event handler specifies a script that is executed when the user submits the form. That script is where you check whether certain fields have a value, whether the user has checked at least one checkbox, and any other checks you deem necessary.The general syntax is:
<form action="something.pl" onsubmit="return checkscript()">where
checkscript()
is the name of the script. This script should return either true
or false
. If false
is returned, the form will not be submitted. If either true
or false
is returned the script stops.So the general script becomes something like:
function checkscript() { if (some value is/is not something) { // something is wrong alert('alert user of problem'); return false; } else if (another value is/is not something) {
// something else is wrong alert('alert user of problem'); return false; } // If the script makes it to here, everything is OK, // so you can submit the form return true;
}Of course this function can become much more complex if you have to check a complicated form with a lot of radio buttons and things. The general idea remains the same, however: You go through the elements, check whatever you want to check and as soon as you find any mistake, you
return false
, after which the script stops and the form is not submitted.Once you've found a mistake, you should notify the user of the problem. This used to be done by an
alert
, but nowadays you can generate error messages and insert them next to the form field.Only at the very end of the script, when you have checked all elements and encountered no mistakes, you
return true
, after which the form is submitted.Form methods and properties
JavaScript has a few built-in methods and properties for dealing with forms. Three of them are especially important:You can submit a form by using the
submit()
method. To submit the first form on the page, dodocument.forms[0].submit()Please note that when a form is submitted by JavaScript the
onsubmit
event handler is never executed.To reset the form, do
document.forms[0].reset()I assume, but have not tested, that the
onreset
event handler isn’t executed either if you reset the form through JavaScript.Finally, you can change the ACTION of a form if you want to:
document.forms[0].action = 'the_other_script.pl';This can come in very handily if a form has to be submitted to another script in some cases.
Accessing the form elements
The form validation script needs to access the form in the HTML page to determine what values the user has filled in. So first we have to enter the form by means of the Level 0 DOM. The general syntax for accessing a form element is:document.forms[number].elements[number]When the page is loaded, JavaScript makes an array
forms
in which it puts all the forms that are on the page. The first form is forms[0]
, the second is forms[1]
etc.Each form has another array in which JavaScript puts all the elements in the form. The first elements is
elements[0]
, the second elements[1]
etc. Every <input>, <select> and <textarea>
is an element.In some cases, it's better to use the names of the forms and elements. In HTML, you have to give a
name
to each form and each element, like:<form name="personal" action="something.pl" onsubmit="return checkscript()"> <input type=text size=20 name=name>
<input type=text size=20 name=address> <input type=text size=20 name=city> </form>Now you can access these elements by:
document.personal.name document.personal.address document.personal.cityThe advantage of using names is that you can put all elements somewhere else in the page and still have a working script, while a script using numbers will have to be changed. After all, the input box city is
document.forms[0].elements[2]
in the example above, but when you suddenly put it at the top of the form, it becomes document.forms[0].elements[0]
and you have to change the script.Determining values
Of course, the most important thing is to find out what the user has filled in or checked in the form. At other times you might want to fill in something in the form.Below are snippets of scripts that help you access form elements. All of them are meant to send the user input to the variable
user_input
. After you've done that, you can check this value for whatever you want.If you'd like to study a practical example, see the example form and script.
Texts, textareas and hidden fields
Very simple:user_input = document.forms[0].text.valuewhere
text
is the name of the text field, textarea or hidden field. The value
of this element gives the text, so we transfer it to user_input
.Writing is also possible:
document.forms[0].text.value = 'The new value';
Select boxes
Select boxes are simple too:user_input = document.forms[0].select.value;To change the selected option in a select box, you have to change its
selectedIndex
, likedocument.forms[0].select.selectedIndex = 2;Now the third option in the box is selected.
Old browsers
In old browsers, select boxes didn't yet have avalue
property. Back then, this was the way to find the value of a select box:var selectBox = document.forms[0].select; user_input = selectBox.options[selectBox.selectedIndex].valueFirst, we need to find out which option the user has selected.
document.forms[0].select.selectedIndex
gives us the number of the selected option. JavaScript has created an array options
which contains all options of the select box. So we ask for the selected option in this array and take the value
of it, which we transfer to user_input
.Checkboxes
Checkboxes need a slightly different approach. We already know their values, but want to know whether the user has checked them. Thechecked
property tells us. It can have two values: true
or false
.Now we do:
if (document.forms[0].checkbox.checked) { user_input = document.forms[0].checkbox.name }in which
checkbox
is the name of the checkbox. If the checkbox is checked
, we take its name
(or its value
, if you need that bit of data) and transfer it to user_input
.To check a checkbox, set its property
checked
to true
:document.forms[0].checkbox.checked = true
Radio buttons
Unfortunately it's not possible to see at once which radio button in a group the user has checked. You need to go through all radio's and see which one'schecked
property is true.for (i=0;i<document.forms[0].radios.length;i++) { if (document.forms[0].radios[i].checked) { user_input = document.forms[0].radios[i].value; } }where
radios
is the name of the group of radio buttons.Note that
document.forms[0].radios
is an array filled with all radio buttons. Loop through all of them and see if it is checked
. If one is, transfer the value
of that radio button to user_input
.document.forms[0].radios.length
gives the number of radio buttons. For each radio button, we see if it is checked
to true
:document.forms[0].radios[i].checked = true;
No comments:
Post a Comment