Open/close
all![[Skip instructions]](../generic/trans.gif){kind=small}
![[i]](../generic/instructions.gif){kind=small}
Click on the headings to open them. They will open on this page. Open the following link
for further
information about these headings if required.
Your browser does not support these headings. To ensure that the contents remain accessible, they have been automatically opened so that all the information on the page is displayed.
However, to take advantage of the headings and to ensure that the layout and design of this site are displayed correctly, you are recommended to upgrade to a current version of one of the following standards compliant browsers:
- Internet Explorer (http://www.microsoft.com/ windows/ie/downloads/ default.mspx)
- Mozilla Firefox (http://www.mozilla.org/ products/firefox/)
- Opera (http://www.opera.com/download/)
CLOSEGlossary links are included within this page. If a word appears as a link, clicking on this link will show the definition of the word in a 'pop-up window'. Select the following link for information about these glossary links if required.
- Select the links see the definitions in a pop-up window.
- NB. If you use pop-up window blocking software, you will need to deactivate it for pop-ups on this site to use the glossary links. Alternatively, all glossary definitions can be seen on the 'Glossary' page in the 'Resources' section.
- Use of the glossary links is JavaScript dependent. If JavaScript is disabled, it will be necessary to open the 'Glossary' page to view the definitions. Opening this page in a new window may allow you to refer more easily to the definitions while you navigate the site.
Introduction
Using JavaScript, it is possible to check that data is in a suitable format, that any required questions have been answered, and that no questions or selections have been accidentally missed prior to submission. This page will provide an overview of the procedure for adding validation to check the data from common form elements. It is recommended that you review the 'Introduction to JavaScript' page and the section on 'simple validation' in particular before working through this page.
When deciding whether or not to add validation to a questionnaire, it is important to consider the effects it may have. Care must be taken when requiring answers to questions that participants may not wish to answer, as this is likely to lead to drop out. Requiring answers should generally only be considered where it is essential to the success of the questionnaire.
Rather than preventing submission of a questionnaire with incomplete answers, it may be appropriate to prompt the participant to check unanswered fields, giving the option of proceeding with the submission or going back to check. This may increase responses and is certainly more likely to deal with accidental omissions without leading to problems of requiring responses.
Client-side scripting via JavaScript has a great advantages over server-side processing when performing validation as it allows an instant response to any problems with the form submission. It is not necessary for the form information to be submitted to the server and then sent back; the processes happen on the user's computer.
However, It is also important to bear in mind that JavaScript may reduce the accessibility of the questionnaire. Users of text-only or screen-reading browsers are likely to be unable to access any functionality provided by JavaScript, and it is also possible that it may not be fully supported in the user's browser or that he or she may have chosen to deactivate it. For this reason, it is important to ensure that the use of the questionnaire does not depend on JavaScript, and to 'back up' any validation via JavaScript with server-side validation once the form is submitted. This is likely to enhance the security as well as the accessibility of the questionnaire. For more information, see the 'accessibility' and 'server-side validation' sections below.
Example
of 'once-only' text box validation
The following is an example of a web form with simple validation applied to a text box. It prevents submission of the form unless 'M,' 'm,' 'F' or 'f' is entered for the question.
It is designed to allow submission the second time the submit button is pressed regardless of whether or not the question has been answered appropriately.
![[?]](../generic/questionwh.gif){kind=small}
Submit the form leaving some answers out or answering them inappropriately
to check how it functions.
The HTML and JavaScript behind the form is as follows:
The
body
The body of the HTML document is shown below. Check your understanding
of how the HTML creates and names the form and form elements,
and provides them with attributes and values where required.
Review the 'Web forms' section
if necessary.
<body>
<form name="genderCheck"
action="" method="post" onSubmit="return
checkForm(this);">
<p>What is your gender (M or F)?</p>
<p><input type="text"
name="genderbox" size="1" maxlength="1"
/></p>
<p><input type="submit" name="Submit"
value="Submit" /></p>
</form>
</body>
Learning
activity: Triggering validation
Check your understanding of how the form triggers and responds
to the validation routines by answering the following questions
and selecting 'check answers' to view suggested answers in a
new window.
Review 'simple validation' in the 'Introduction to JavaScript' section if necessary.
The
validation script
The script makes use of a variable (initially set to 'false')
which is used to check whether or not the user has attempted to
submit the form previously (it is changed to 'true'
on the first submission).
If this is the case (or if the form has been completed correctly
the first time the submission is attempted) the submission is
allowed to proceed ('true' is returned to the form).
Otherwise, the submission is blocked ('false' is
returned to the form) and the variable is changed to 'true'
to allow it to proceed next time.
The script is shown below with comments explaining each section of code.
It is common to add these comments to JavaScript code to provide
an explanation of how it works. They are ignored by the browser,
but can be viewed in the source code of the HTML document or
the JavaScript file. Comments in JavaScript should be prefixed
by two forward-slashes (//) to ensure that the
browser ignores them.
Check your understanding of the code by reading the comments.
Review the 'Introduction to JavaScript'
section if necessary.
<script language="javascript" type="text/javascript">
// Set variable for whether submit
has been pressed (Placed outside the function so that its
value will not be set to false every time the function is
called, but will be 'remembered'var submitPressed = false;
// start function and tell it to expect the name
and reference to the form to be passed into it (to replace
the word 'form') when the function is called
function checkForm(form) {
// Check the submission - If the question has been
answered correctly (the box contains 'm', 'M', 'f', or 'F')
or if the user has already tried to submit once before (genderSubmitPressed
is 'true'), provide the user with a thank-you alert and
return 'true' to the form to allow submission to proceed.
if (submitPressed == true || form.genderbox.value
=="m" || form.genderbox.value =="M"
|| form.genderbox.value =="f" || form.genderbox.value
=="F") {
alert("Thank you for completing the form.");
return true;
}
// In any other situation, deliver an alert box
message to the user reminding them to answer the question.
Change the submitPressed variable to 'true' to allow submission
to proceed next time and return 'false' to the form to
prevent submission this time.
else {
alert("Please insert your gender which is needed
for analysis purposes and which will not compromise the
anonymity of your data. If you would rather not provide
this information, press the submit button again to proceed.");
submitPressed = true;
return false;
}
// end function
}
</script>
In a situation where the researcher wishes to require an answer
to the question and not allow submission at the second attempt,
this could easily be done by removing the three references to
the 'submitPressed' variable in the code (var submitPressed
= false;, submitPressed == true ||, and
submitPressed = true;).
Radio
buttons
It is also possible to check that one of a group of radio buttons has been checked as follows:
This is made possible by the fact that all of the radio buttons have the same name and are thus automatically included in an array. This means that each of the buttons is given a number starting with zero. These numbers can be used to refer to each Check box using the following syntax:
form.often[x]
where x is the number of the button and where form
is replaced by the name and reference to the form (e.g. window.document.formname)
which is passed into the function when it is called.
The HTML for the radio buttons is as follows:
<input type="radio" name="often"
value="everyday" />
everyday<br />
<input type="radio" name="often" value="2-3
days per week" />
2-3 days per week<br />
<input type="radio" name="often" value="4-5
days per week" />
4-5 days per week<br />
<input type="radio" name="often" value="6-7
days per week" />
6-7 days per week<br />
<input type="radio" name="often" value="less
than once a week" />
less than once a week </p>
The reference to the first button is:
form.often[0]
while the reference to the last (the fifth) is:
form.often[4]
Each radio button has a property checked which has
a value true or false. This can be used
to ascertain whether it has been selected (checked
is true) or has not been selected (checked
is false).
The section of the validation script that checks whether one of the buttons has been selected is as follows:
if (form.often[0].checked == true || form.often[1].checked
== true || form.often[2].checked == true || form.often[3].checked
== true || form.often[4].checked == true){
alert("Thank you for completing the
form.");
return true;
}
This displays the thank-you message and returns true to the form to allow submission to proceed in the following circumstances:
| circumstances | code |
|---|---|
| button 1 has been selected: | form.often[0].checked == true |
| or: | || |
| button 2 has been selected: | form.often[1].checked == true |
| or: | || |
| button 3 has been selected: | form.often[2].checked == true |
| or: | || |
| button 4 has been selected: | form.often[3].checked == true |
| or: | || |
| button 5 has been selected: | form.often[4].checked == true |
This can be simplified by looping through each of the boxes to check whether or not they have been selected, as follows:
for (var i = 0; i < form.often.length; i++){
if (form.often[i].checked == true){
questionAnswered = true;
}
}
if (questionAnswered == true){
alert("Thank you for completing the form.");
return true;
}
This begins a loop which feeds the value of i into
the conditional (if (form.often[i].checked == true))
The initial value of i is set to 0 (var i = 0;) and
it is set to increase by one at the end of each loop (i++)
until i is no longer less than the length of the array
of Check boxes called often (i<form.often.length;)
which in this case is five (there are five boxes).
This means that the conditional (if (form.often[i].checked
== true)) is carried out five times with i replaced
with 0, 1, 2, 3,
and 4.
In each case, if the button has been selected, a variable questionAnswered
is set to true.
This is followed by another conditional which displays the thank-you
message and returns true to the form if questionAnswered
is true.
The complete code is as follows:
<script language="javascript" type="text/javascript">
// Set variable for whether submit
has been pressedvar submitPressed = false;
// start function
function checkForm(form) {
// Set variable for whether question
has been answeredvar questionAnswered = false;
// Check the submission - If any of the buttons have
been selected, change 'questionAnswered' variable to 'true'.
for (var i = 0; i<form.often.length; i++){
if (form.often[i].checked == true){
questionAnswered = true;
}}
// If 'submitPressed' is 'true' (the submit button
has already been pressed) or 'questionAnswered' is 'true'
(an option has been selected), provide the user with a thank-you
alert and return 'true' to the form to allow submission to
proceed.
if (submitPressed == true || questionAnswered == true){
alert("Thank you for completing the form.");
return true;}
// In any other situation, deliver an alert box message
to the user reminding them to answer the question. Change
the submitPressed variable to 'true' to allow submission to
proceed next time and return 'false' to the form to prevent
submission this time.
else {
alert("Please select an answer. If you would
rather not provide this information, press the submit button
again to proceed.");
submitPressed = true;
return false;}
// end function
}
</script>
Check boxes
Like radio buttons, a group of check boxes can be given the same name. In this case, they can be validated in the same way as radio buttons using the array which automatically numbers the boxes.
The HTML for the Check boxes is as follows:
<p>Which of the following do you regularly use the
internet for?</p>
<p>
<input type="Check box" name="uses"
value="email" />
E mail<br />
<input type="Check box" name="uses"
value="finding information about things to buy" />
Finding information about things to buy<br />
<input type="Check box" name="uses"
value="making purchases" />
Making purchases<br />
<input type="Check box"
name="uses" value="entertainment" />
Entertainment<br />
<input type="Check box" name="uses"
value="finding general information" />
Finding general information<br />
<input type="Check box" name="uses"
value="educational courses" />
Educational courses<br />
<input type="Check box" name="uses"
value="downloading music" />
Downloading music<br />
<input type="Check box" name="uses"
value="discussion boards" />
Discussion boards<br />
<input type="Check box" name="uses"
value="real-time chat" />
Real-time chat</p>
<p>
The Check boxes are given the same name (uses), but
different values. When the form is submitted, the value of any checked
box can be added to a variable. Each of the different values is
added separated by a comma. Thus, for example, if the first three
Check boxes are selected, the variable will be :
"email, finding information about things to buy,
making purchases"
The code for checking that an option has been selected is exactly the same as that for the radio buttons, except that the name given to the Check boxes is added to the loop and conditionals, as follows:
for (var i = 0; i<form.uses.length;
i++){
if (form.uses[i].checked
== true){
questionAnswered = true;
}}
This is a key advantage of using the loop to check each of the radio buttons or check boxes rather than including a conditional for every button or box. The same piece of code can be used for each group regardless of the number of boxes, with the only necessary modification being the name.
Select
boxes
Select boxes can be validated in a similar way to radio buttons and Check boxes, as the options in a box are also counted in an array.
The HTML for the select box is as follows:
<p>How would you rate your skill as an internet
user?</p>
<p>
<select name="skill">
<option value="not answered">Select
an option</option>
<option value="not answered">-------------------</option>
<option value="very advanced">Very
advanced</option>
<option value="advanced">Advanced</option>
<option value="average">Average</option>
<option value="basic">Basic</option>
<option value="very basic">Very
basic</option>
</select>
</p>
<p>
It is given the name skill and each option is given
an appropriate value. The options are counted in an array as follows:
form.skill.options[x]
where x is the number of the option (starting from
0) and where form is replaced by the name and reference
to the form (e.g. window.document.formname) which is
passed into the function when it is called.
Thus, the reference to the first option (labeled 'Select
an option' and given the value 'not answered')
is:
form.skill.options[0]
while the reference to the last (the seventh, labeled 'Very
basic' and given the value 'very basic') is:
form.skill.options[6]
The first option provides the instruction to the user (Select
an option), and the second acts as a divider between this
and the options proper(-------------------). Thus,
it can be assumed that if either of these options is selected,
the question has not been answered.
It is therefore possible to check that a valid option has been selected through the following code:
// Check the submission - If both the first and second
options have not been selected, provide the user with a thank-you
alert and return 'true' to the form to allow submission to
proceed.
if (form.skill.options[0].selected != true &&
form.skill.options[1].selected != true) {
alert("Thank you for completing the form.");
return true;
}
Validating
multiple form elements
As with the previous examples, the following questionnaire prevents the first submission of the form unless all the questions have been answered and allows submission the second time the submit button is pressed regardless of whether or not all the questions have been answered appropriately.
In this case, however, there is more than one form element, so it is helpful to inform the user of which question(s) need attention. This is done through delivery of an alert-box message when a problem is found.
Complete the web form leaving some answers out or answering them
inappropriately (they will be dealt with client side and will
not be sent away from your computer).
This is done through the use of extra variables which are set to record which questions have not been answered and to add the question numbers to the alert box message.
The code for this is shown in the following learning activity.
Learning
activity: Validating multiple elements
This activity will allow you to check your understanding
of how the code works, by matching the comments to the
sections of code that they describe. It will also act
as a review of once-only validation of textboxes and radio
buttons. There is a text-only alternative to this activity
below if required.
Text-only
alternative
This
activity will allow you to check your understanding
of how the code works, by matching the comments to
the sections of code that they describe. It will also
act as a review of once-only validation of textboxes
and radio buttons.
Match the pieces of code (A-H) to the comments theat describe them (1-8).
Code
<script language="javascript"
type="text/javascript">
A
var submitPressed = false;
var q1Answered = false;
var q2Answered = false;
var alertMessage = "";
// start function
function checkForm(form) {
B
else{
q1Answered = true;
}
C
for (var i = 0; i<form.often.length; i++){
if (form.often[i].checked == true){
q2Answered = true;
}
}
D
if (q2Answered == false){
alertMessage = alertMessage + "2 ";
}
E
if (submitPressed == true || (q1Answered == true &&
q2Answered == true)){
alert("Thank you for completing the
form.");
return true;
}
F
else {
alert("Please check your answers to
the following question(s):\n\r" + alertMessage
+ "\n\rIf you are happy with them, press the
submit button again to proceed with the submission.");
}
G
submitPressed = true;
return false;
}
// end function
}
</script>
Comments
- // Check question 1 - If the box is empty, the question has not been answered. In this case, add the question number to the message that will be delivered to the user to indicate that there are problems with certain questions.
- // If both questions have been answered (q1Answered and q2Answered are both true) or if the user has already tried to submit once before (submitPressed is true), provide the user with a thank-you alert and return 'true' to the form to allow submission to proceed.
- // If either or both of the questions has not been answered, deliver an alert box message to the user and include the variable 'alertMessage' which was used to collect the numbers of the unanswered questions.
- // Change the submitPressed variable to true to allow submission to proceed next time and return 'false' to the form to prevent submission this time.
- // If 'q2Answered' is still false, the question has not been answered, so add the question number to the message.
- // If the box is not empty, the question has been answered, so the 'q1Answered' variable is changed to 'true'.
- // Check question 2 - If any of the buttons have been selected, change 'q2Answered' variable to 'true'.
- // Set variables
// Variable for whether submit has been pressed
// Variable for whether each question has been answered
// Variable for the final alert box message.
Answers
A=8
B=1
C=6
D=7
E=5
F=2
G=3
H=4
Complete code:
<script language="javascript"
type="text/javascript">
// Set variables
// Variable for whether submit has been pressed
// Variable for whether each question has been
answered
// Variable for the final alert box message.
var submitPressed = false;
var q1Answered = false;
var q2Answered = false;
var alertMessage = "";
// start function
function checkForm(form) {
// Check question 1 - If the box is empty,
the question has not been answered. In this
case, add the question number to the message
that will be delivered to the user to indicate
that there are problems with certain questions.
if (form.namebox.value ==""){
alertMessage = "1 ";
}
// If the box is not empty, the question
has been answered, so the 'q1Answered' variable
is changed to 'true'.
else{
q1Answered = true;
}
// Check question 2 - If any of the buttons
have been selected, change 'q2Answered' variable
to 'true'.
for (var i = 0; i<form.often.length;
i++){
if (form.often[i].checked == true){
q2Answered = true;
}
}
// If 'q2Answered' is still false, the
question has not been answered, so add the question
number to the message.
if (q2Answered == false){
alertMessage = alertMessage + "2
";
}
// If both questions have been answered
(q1Answered and q2Answered are both true) or
if the user has already tried to submit once
before (submitPressed is true), provide the
user with a thank-you alert and return 'true'
to the form to allow submission to proceed.
if (submitPressed == true || (q1Answered
== true && q2Answered == true)){
alert("Thank you for completing
the form.");
return true;
}
// If either or both of the questions
has not been answered, deliver an alert box
message to the user and include the variable
'alertMessage' which was used to collect the
numbers of the unanswered questions.
else {
alert("Please check your answers
to the following question(s):\n\r" + alertMessage
+ "\n\rIf you are happy with them, press
the submit button again to proceed with the
submission.");
}
// Change the submitPressed variable
to true to allow submission to proceed next
time and return 'false' to the form to prevent
submission this time.
submitPressed = true;
return false;
}
// end function
}
</script>
A summary of the working of the code is as follows:
The text box and radio button validation routines shown in the sections above are carried out, but where a question has been answered a variable for that question is set to true rather than the submission occurring immediately. Where a question has not been answered, the submission is not immediately blocked, but the number of that question is added to a variable which is then incorporated into an alert-box message.
Finally, both the question variables are checked and where they are found to be true (i.e. they have been answered) or where the form has been submitted once before (the form submission variable is found to be true) a thank-you message is delivered. If any question variable is false, the alert-box message is delivered and the form submission variable is changed to true.
The complete code is as follows:
<script language="javascript"
type="text/javascript">
// Set variables
// Variable for whether submit has been pressed
// Variable for whether each question has been
answered
// Variable for the final alert box message.
var submitPressed = false;
var q1Answered = false;
var q2Answered = false;
var alertMessage = "";
// start function
function checkForm(form) {
// Check question 1 - If the box is empty,
the question has not been answered. In this
case, add the question number to the message
that will be delivered to the user to indicate
that there are problems with certain questions.
if (form.namebox.value ==""){
alertMessage = "1 ";
}
// If the box is not empty, the question
has been answered, so the 'q1Answered' variable
is changed to 'true'.
else{
q1Answered = true;
}
// Check question 2 - If any of the buttons
have been selected, change 'q2Answered' variable
to 'true'.
for (var i = 0; i<form.often.length;
i++){
if (form.often[i].checked == true){
q2Answered = true;
}
}
// If 'q2Answered' is still false, the
question has not been answered, so add the question
number to the message.
if (q2Answered == false){
alertMessage = alertMessage + "2
";
}
// If both questions have been answered
(q1Answered and q2Answered are both true) or
if the user has already tried to submit once
before (submitPressed is true), provide the
user with a thank-you alert and return 'true'
to the form to allow submission to proceed.
if (submitPressed == true || (q1Answered
== true && q2Answered == true)){
alert("Thank you for completing
the form.");
return true;
}
// If either or both of the questions
has not been answered, deliver an alert box
message to the user and include the variable
'alertMessage' which was used to collect the
numbers of the unanswered questions.
else {
alert("Please check your answers
to the following question(s):\n\r" + alertMessage
+ "\n\rIf you are happy with them, press
the submit button again to proceed with the
submission.");
}
// Change the submitPressed variable
to true to allow submission to proceed next
time and return 'false' to the form to prevent
submission this time.
submitPressed = true;
return false;
}
// end function
}
</script>
You can select the following link to view the HTML page and code in a new window. You can then select VIEW -> SOURCE if you wish to see or copy the complete HTML file.
Putting
it all together
This section contains examples of validation of a questionnaire
with multiple questions and question types. The complete code for
each method shown can be viewed in the 'Adapting the code' section
below.
The following questionnaire about internet use incorporates all of the different validation elements outlined above.
Complete the web form leaving some answers out and consider any
possible problems with the way the validation works (they will
be dealt with client side and will not be sent away from your
computer).
A potential problem with the way the questionnaire is validated is that a single message is delivered to the user which includes all the questions requiring attention. This is not ideal as the user is unlikely to be able to remember which questions need to be checked in cases where there is more than one or two. Two more complex possible alternatives are shown below.
Alternative 1: One-by-one
validation
In this case, each question is checked individually. If a question has not been answered or previously submitted, an alert message is displayed to the participant, and false is returned to the form to prevent submission. A variable for that question is also set to true so that submission will not be blocked if the participant resubmits without answering the question for a second time.
If the first question has been answered or has been submitted before, the second is checked. If this has been answered or previously submitted, the third is checked. This continues until all have been checked and a thank-you message is then delivered.
Complete the web form leaving some answers out (they will
be dealt with client side and will not be sent away from your
computer).
A potential problem with the way this questionnaire is validated is that it tends to overuse alert messages. Where a number of questions have not been answered, the participant may become frustrated by this, which could lead to increased drop-out rates. However, it is no more difficult to implement and adapt for different questionnaires than the first example.
Alternative
2: Displaying messages within the questionnaire
This alternative is similar to the first example in that all the questions are checked together. The questionnaire prevents the first submission of the form unless all the questions have been answered and allows submission the second time the submit button is pressed regardless of which questions may not have been answered appropriately.
Rather than delivering an alert-box message with the numbers of the questions that have not been answered correctly, however, a message is revealed next to the questions on the questionnaire itself.
Complete the web form leaving some answers out (they will
be dealt with client side and will not be sent away from your
computer).
This probably provides the most effective validation in terms of usability, but there may be problems for participants using older browsers (with version numbers lower than Netscape Navigator 5 or Internet Explorer 4) who may not be able to access the messages.
For this reason, an alert box message is included indicating that there is a problem with the answers. For users with a browser capable of displaying them, this is backed up with the messages indicating where the problems are. However, those who cannot access these messages are still informed of the reason for the failed submission, prompted to check their answers, and given the message that pressing the submit button a second time will allow it to proceed.
Thus, while the use of the messages adds to the functionality of the questionnaire, it does not prevent it from being usable for those who are unable to access it (see 'accessibility' section).
The messages are revealed using <div> and
<span> tags in the HTML code with CSS and
JavaScript. Implementing and adapting this method of presenting
the results of validation is slightly more involved that the
previous examples, but the validation routines are very similar
to those of the first example.
Adapting the
code
The complete HTML and JavaScript for each of the three questionnaires shown in this section can be seen by selecting the links at the end of this section. The code can then be saved, or copied and pasted into your text editor for adaption and use in questionnaires with different types and numbers of questions. There are explanatory comments in the code and some general notes on adaptation are as follows:
- When removing questions, make sure that associated code and variables are also removed.
- When adding validation to new questions, be sure to copy in full the associated code and variables from a question of the same type.
- When adding form elements for new questions, give them a unique name and make sure that this is added correctly into the code copied from similar questions.
- Similarly, make sure that new variable names are unique and added correctly into all relevant parts of the code.
- Ensure that you have included the required punctuation,
or the code may not run correctly. For example, make sure
that functions are contained within curly brackets (
{}), and that conditionals are within brackets, with actions resulting from conditionals in curly brackets. See the 'Introduction to JavaScript' section of this guide for further information if required.
Select the following links to view the HTML pages in a new
window. You can then select VIEW -> SOURCE if you wish
to see or copy the complete HTML/JavaScript file.
Questionnaire 1: Alert-box message
Questionnaire 2: One-by-one validation
Questionnaire 3: Validation via messages within the questionnaire
Validating
before submission
The following form applies validation routines before the submit button is pressed. For both questions, participants are prevented from selecting more than three options, and for question 2, they are also limited to entering '1', '2', or '3' in the text boxes.
Complete the web form to check how the validation works. Consider
how this could be achieved using some of the validation techniques
above.
Three different validation routines are carried out.
The first two routines are carried out independently of the submit
button when participants are completing the questions. The first
occurs as the result of an onclick event handler, when
participants select a Check box. The second occurs as a result of
an onblur event handler when participants click away
from a text box. (see the information about event handlers in the
'Introduction to JavaScript' for
more information if necessary).
This type of validation ensures that problems are dealt with before participants attempt to submit and also serves to provide on-going instructions to participants attempting to complete the questions.
Finally, there is a function called by pressing the submit button. This checks that three options have been selected for the questions and delivers an alert message if this is not the case.
Each of the routines is explained in the following sections:
'onclick'
validation
The validation routine for question 1 consists of a function
which is called by the onclick event handler when
participants select the Check boxes.
Each of the eleven Check boxes is given the same name (adjectives)
which means that they are automatically added to an array from
zero to ten. They are also given appropriate values so that
when the form is submitted the value of checked boxes can be
added to the adjectives variable. The onclick
event handler is added to each which calls a function called
count() and returns the result of this function
to the Check box. If true is returned, the Check box
is selected, and if false is returned, it is deselected.
(This works in a similar way to returning true
or false to a form when it is submitted). Thus,
the HTML for the first and second Check boxes is:
<input type="Check box"
name="adjectives" value="easy" onclick="return
count(this.form)" />
Easy to use<br />
<input type="Check box"
name="adjectives" value="attractive"
onclick="return count(this.form)" />
Attractive<br />
When participants select a box, the function counts the number
of checked boxes, returning false (deselecting
the box) if three boxes have already been selected, and returning
true allowing the box to remain selected) if fewer
than three have been selected. The commented code is as follows:
// start function and tell it to expect the name
and reference to the form to be passed into it (to replace
the word 'form') when the function is called.
function count(form) {
// Set variable called 'number'
used to count the number of Check boxes selected. This is
contained within the function, so it is 'local' to the function.
Thus, it is 'reset' to 0 each time the function is called
and does not 'remember' between function calls. A variable
with the same name can be included in a different function
without interfering with this one.var number = 0;
// Start a loop to check each
of the boxes. For each box, check if it is selected, and
if so, add 1 to the 'number' variable.for (i = 0; i < form.adjectives.length; i++) {
if (form.adjectives[i].checked == true){
number = number+1;
}
}
// Check the 'number' variable.
If it is less than 4, return 'true' so that it stays checked.if (number < 4) {
return true;
}
// If it equals 4 (the Check box
clicked would be the fourth to be selected), return 'false'
so that it is deselected. else if (number ==4) {
return false;
}
}
'onblur' validation
The routine for question 2 consists of a function called check2()
which is called by the onblur event handler when participants
click away from a text box. The counting of the text boxes that
have been filled in occurs in a similar way to the routine in
question 1.
However, the text boxes cannot be given the same name, as it
would not be possible to distinguish which ones have been chosen.
Thus they cannot be counted in an array. Instead of this, it
is possible to use the form.elements array to count
the boxes. This is an array of all the form elements in a form.
The first to appear is given the number zero (form.elements[0])
and the second is given the number one (form.elements[1]).
This continues for all the elements in the form.
By counting how many elements come before the first text box
in question 2, and counting how many text boxes there are, we
can find the number of the boxes in this form.elements
array and use this information in the validation routine.
There are 11 Check boxes in question 1 (form.elements[0])
to (form.elements[10]) and there are 8 textboxes
in question 2. Thus the first textbox in question 2 is the 12th
in the form.elements array (form.elements[11])
and the last is the 20th (form.elements[19]).
This means that the routine needs to check the 12th to the 20th elements and count the ones that have been filled, preventing more than three from being filled. This is similar to the code in the routine for question 1. However, the number of the box in the element.array must be fed into the function as an argument so that the box that called the function can be identified.
Thus, there are two arguments in the function (the form reference and the number of the box in the array), and the HTML for the first two boxes is as follows:
<p> It is expensive
<input type="text"
maxlength="1" size="1" name="expensive"
onblur="count2(this.form, 11)" /><br
/>
It is too slow
<input onblur="count2(this.form,
12)" type="text" maxlength="1"
size="1" name="slow" />
and the function is begun and ended as follows:
function count2(form, box) {
}
The section of the function that counts the boxes is as follows:
// Set variable called 'number'
used to count the number of textboxes filled.var number = 0;
// Start a loop to check each
of the boxes. For each box, check if it is filled (its value
is not an empty string(""), and if so, add 1 to
the 'number' variable.for (i = 11; i < 19; i++) {
if (form.elements[i].value !=""){
number = number+1;
// Check the 'number' variable.
If it is has reached 4 (this is the fourth box to be filled),
delete the contents of the last box to be filled in (by
changing the value of the box which called the function
to "") and provide an alert message.if (number == 4){
form.elements[box].value ="";
alert("Please select three options only. Delete one
of your selections if you would like to change it.");
}
}
}
// NB. It is important to check
that all curly brackets that have been opened are closed
correctly, or the script will not run correctly.This provides the facility of limiting the number of responses to three, but it does not limit what the contents of the boxes can be.
To do this, it is necessary to check that only the numbers 1, 2 and 3 have been entered in the boxes, and to ensure that these numbers have been entered only once.
Three variables are set to count the number of times that 1, 2 and 3 have been entered and if a box that calls the function is found to contain a number for the second time, the contents are deleted and a message delivered to the participant. This also occurs if any other content is inserted into the box.
The commented code for this section of the function is as follows:
// Set variables called 'onePicked',
'onePicked', and 'onePicked' used to count the number of
occurrences of 1, 2 and 3.var onePicked = 0;
var twoPicked = 0;
var threePicked = 0;
// Start a loop to check each
of the boxes.for (j = 11; j < 19; j++) {
// For each box, check if the
value is "1", and if so, add 1 to the 'onePicked'
variable. If it has reached 2 ('onePicked is greater than
1), delete the contents of the last box to be filled in
(by changing the value of the box which called the function
to "") and provide an alert message.if (form.elements[j].value =="1") {
onePicked = onePicked +1;
if (onePicked >1){
form.elements[box].value ="";
alert("Please select rank 1 for one option only");
}
}
// Do the same for value "2".else if (form.elements[j].value =="2")
{
twoPicked = twoPicked +1;
if (twoPicked >1){
form.elements[box].value ="";
alert("Please select rank 2 for one option only");
}
}
// And for value "3".else if (form.elements[j].value =="3")
{
threePicked = threePicked +1;
if (threePicked >1){
form.elements[box].value ="";
alert("Please select rank 3 for one option only");
}
}
// Finally check that no other value has been added
to the boxes, by checking for boxes that are not empty
(and do not contain "1", "2" or "3".
If any other value is found, delete the contents of the
box, and give focus to it (place the cursor in the box)
ready for the participant to add a different value.
else if (form.elements[j].value !=""){
alert("Please enter a number from 1-3");
form.elements[box].value ="";
form.elements[box].focus();
}
}
'onSubmit'
validation
This is the most straightforward of the functions, because the more involved validation activities have been carried out beforehand. All that has to be done is to check that three options have been chosen for each question. If this is the case, it can be assumed that the validation from the other functions has already ensured the correct number and format of responses has been provided.
The commented code is as follows:
function checkForm(form) {
// Set variable used to count the
number of Check boxes selected for question 1. var number = 0;
// Start a loop to check each of the
boxes in question 1. For each box, check if it is checked,
and if so, add 1 to the variable.for (i = 0; i < form.adjectives.length; i++) {
if (form.adjectives[i].checked == true){
number = number+1;
}
}
// At the end of the loop, check how
many boxes have been selected. If it is not three, deliver
an alert message and return 'false' to the form to prevent
submission.if (number != 3) {
alert("Please select three options for question
1.");
return false;
}
// Set variable used to count
the number of text boxes filled in for question 2.var number2 = 0;
// Start a loop to check each
of the boxes in question 2. For each box, check if it is
filled (it's value is not an empty string ""),
and if so, add 1 to the variable.for (j = 11; j < 19; j++) {
if (form.elements[j].value !="") {
number2 = number2+1;
}
}
// At the end of the loop, check
how many boxes have been filled. If it is not three, deliver
an alert message and return 'false' to the form to prevent
submission.if (number2 != 3) {
alert("Please select your three options for
question 2.");
return false;
}
// If the code makes it to this stage without returning
'false' to the form, the correct number of responses have
been made. Deliver a thank-you alert message and return
'true' to the form to allow submission to proceed.alert("Thank you for completing the form.");
return true;
}
You can select the following link to view the HTML page and code in a new window. You can then select VIEW -> SOURCE if you wish to see or copy the complete HTML file.
Accessibility
Providing that submission of a questionnaire is not prevented in browsers without JavaScript, validation routines will not prevent a questionnaire from being accessible as they will simply not work. Though this may have an impact on the quality of the data received from a non-JavaScript browser (e.g. if participants using these browsers accidentally miss questions or answer them in an inappropriate format), it will not prevent the questionnaire from being fully usable by these participants.
However, it may be beneficial to perform server-side validation as a 'back up' to the client-side JavaScript validation. Because server-side processing occurs before the HTML page is delivered to the browser, it is not dependent on the technology available on the client computer. Although this is a slower method of checking the information, it is likely to be necessary only where JavaScript is not available and thus where any problems with the data have not been dealt with before the form is sent. This kind of 'back-up' validation also has security benefits where users may have deactivated JavaScript in the browser to avoid validation.
Server-side validation
Methods of validating in any of the main server-side languages are basically similar to those using JavaScript, involving conditionals to check the contents or selection of form elements and carrying out different actions accordingly (e.g. processing results by emailing them or by adding them to a database, or preventing processing and returning a message to the participant prompting them to check and resubmit).
An overview of server-side technologies and their use in gathering data via questionnaires can be found in the 'Server-side processing' section of this guide.
Depending on the technology used, the following links may provide a useful source of information, tutorials and examples on how to add server-side validation.
PHP/MySQL
A PHP tutorial which covers a range of different validation
activities, leading to an example of a complete form validated
via PHP.
![[External Link - opens in a new window]](../generic/external.gif){kind=small}
http://www.codewalkers.com/c/a/Miscellaneous/Form-and-Spelling-Validation/
Sklar, D. (2004) Learning PHP. Sebastapol,
CA. O'Reilly.
Chapter 6: Making web forms.
http://www.oreilly.com/
catalog/learnphp5/
Sklar, D. and Trachtenberg, A. (2003) PHP
Cookbook. Sebastapol, CA. O'Reilly.
Chapter 9: Forms.
http://www.oreilly.com/ catalog/phpckbk/
Coggeshall, J. (2005) PHP Unleashed.
Indianapolis. SAMS.
Chapter 4: Working with Forms in PHP.
Chapter 5: Advanced Form Techniques.
http://www.samspublishing.com/ title/067232511X
Zandstra , M. (2005) Teach Yourself PHP
in 24 Hours, 2nd Edition. Indianapolis. SAMS.
Chapter 9: Working with Forms (available as a sample chapter)
http://www.samspublishing.com/
title/0672323117
ASP.NET
Microsoft's ASP.NET framework offers a number of ready-made web controls designed to carry out server-side and, where available, client-side validation of web forms. These include controls that check required fields have been completed, that check that data in particular ranges or patterns has been entered (e.g. in the format of a telephone or credit-card number), and that compare data from one form element for consistency with that from another.
A useful tutorial on how these controls work with code examples
is available from the ASP.NET Quickstart tutorials
http://www.asp.net/ QuickStart/aspnet/ doc/validation/default.aspx
A step-by-step guide is also available from the 4guysfromrolla.com
site:
http://www.4guysfromrolla.com/
webtech/090200-1.shtml
Mitchell, S. (2003) Teach yourself ASP.NET.
Indianapolis. SAMS.
Chapter 12. Validating User Input with Validation Controls.
http://www.samspublishing.com/
title/0672325438#
Walther, S. (2003) ASP.NET. Unleashed.
Indianapolis. SAMS.
Chapter 2: Building Forms with Web Server Controls.
Chapter 3: Performing Form Validation with Validation Controls.
http://www.samspublishing.com/
title/0672325438#
PERL/CGI
An introductory tutorial for adding validation using PERL.
http://www.elated.com/
tutorials/ programming/ perl_cgi/ form_validation/
Colburn, R. (2003) Teach yourself CGI.
Indianapolis. SAMS.
Chapter 7: Validating user input.
http://www.samspublishing.com/ title/0672324040
Guelich, S., Gundavaram, S. and Birznieks, G.
(2000) CGI Programming with Perl. Sebastapol, CA. O'Reilly.
Chapter 4: Forms and CGI;
Chapter 8: Security (available as a sample chapter).
http://www.oreilly.com/
catalog/ cgi2/ toc.html