Form Data Validation

Posted by arlene

As the reader may have discovered by now, when the ‘Send data‘ button is clicked, no testing occurs to ensure that form elements have been filled in, checked, or selected; it is quite easy for participants to supply no information at all and just submit an empty form. Happily, it is possible to use JavaScript to check that the form really has been filled in before allowing it to be submitted.

To check that the participant ID box has been filled in, you can add the following code before the final line in the ’stopTimer()’ function (that is, just before ‘return true‘).

If (document.myform.userid.value ==”")

{

Alert(’Please enter your participant ID‘); return false;

}

The effect of this is to check whether the participant ID box is empty, and if so, to pop up an alert dialogue box to remind the participant to fill it in,and to prevent the form being submitted to the server. If the participant ID is not empty, the ’stopTimer()’ function should return the Boolean value ‘true‘, allowing form submission to go ahead.

The ’stopTimer()’ function now has a new role, to test for the validity of form data, as well as recording timings. You might like to change its name to reflect its new status, to something like ‘handleSubmit()’, and of course you should remember to update the reference to it in the <FORM> tag too.

It is still possible to submit the form without having answered the question about the truth. Tackling this is slightly more complicated, since in this case we want to ensure that one of the boxes comprising the rating scale has been checked. This implies the use of more complex code, so it is convenient to define a general function, which will allow us to re-use the same code with every radio object we might define in future. To do this, add the following function somewhere in the main JavaScript section:

Function testRadio(objradio)

{

Is_checked=false;

For (i=0; i < objradio.length; i++)

If (objradio[i].checked)

{

Is_checked=true; break;

}

Return is_checked;

}

The function will return ‘true‘ if any member of the radio complex (whose name is to be supplied as the argument of the function) has been checked, otherwise it will return ‘false’. Now, to perform the actual test and pop up the alert box if required, add the following code after the participant ID check, but before the final ‘return true‘:

If (!testRadio(document.myform.truth))

{

Alert(’Please tell us what you think of the truth sentence’); return false;

}

The exclamation mark preceding the function call specifies logical negation, so if the test does not return ‘true‘, the alert box will be popped up to prompt the participant, and the form will not be submitted until the next time the participant clicks the ‘Send data‘ button. At this point, all the testing will be repeated, until the form is finally completed and the function returns ‘true‘, allowing the data to be submitted to the server.

Since the remaining checkboxes on the form are strictly optional, there is no need to test them. The above code will work if JavaScript is enabled on the client, but even if it is disabled, the form should still function and be submitted as usual. In this event, there will be no data validation, as was the case before we added the testing code.

Stimulus Randomisation

It is a common requirement in experimental studies and surveys that biases inherent in materials should be eliminated where possible. In the present case, an obvious potential for bias exists in the form of the truth question, namely the constant left—right order of the rating scale response alternatives. Perhaps participants tend to click the leftmost box, irrespective of the sense of the question; in case this is so, we can control against it by presenting the response scale in either of two orders, randomly, then we can expect any such directional biases to cancel out statistically.

Since, as we have already seen, we can use JavaScript inline, we can replace the ordinary HTML code used to generate the truth rating scale, and use JavaScript’s built-in random number function to write the rating scale forwards or backwards on a random basis. You can make this work by replacing the lines between ‘<table align=center><tr>’ and ‘</tr></table>’ with the following code:

<script language=javascript> if (Math.random() < 0.5)

Document.writeln(’<td align=center><input type=radio name=truth value=2></td>’);

Document.writeln(’<td align=center><input type=radio name=truth value=1></td>’);

Document.writeln(’<td align=center><input type=radio name=truth value=0></td>’);

Document.writeln(’<td align=center><input type=radio name=truth value=-1></td>’);

Document.writeln(’<td align=center><input type=radio name=truth value=-2></td>’);

Document.writeln(’</tr>’);

Document.writeln(’<tr>’);

Document.writeinç<td align=center>Strongly<br>agree</td>’); document.writeln(’<td align=center>Mildly<br>agree</td>’); document.writeln(’<td align=center>Don’t<br>know</td>’); document.writeln(’<td align=center>Mildly<br>disagree</td>’); document.writeln(’<td align=center>Strongly<br>disagree</td>’);

} else {

Document.writeln(’<td align=center><input type=radio name=truth

Value=-2></td>’);

Document.writeln(’<td align=center><input type=radio name=truth

Value=-1></td>’);

Document.writeln(’<td align=center><input type=radio name=truth

Value=0></td>’);

Document.writeln(’<td align=center><input type=radio name=truth

Value=1></td>’);

Document.writeln(’<td align=center><input type=radio name=truth

Value=2></td>’); document.writeln(’</tr>’);

Document.writeln(’<tr>’);

Document.writeln(’<td align=center>Strongly<br>disagree</td>’);

Document.writeln(’<td align=center>Mildly<br>disagree</td>’); document.writeln(’<td align=center>Don’t<br>know</td>’); document.writeln(’<td align=center>Mildly<br>agree</td>’); document.writeln(’<td align=center>Strongly<br>agree</td>’);

</script>

This code replaces the literal HTML code with inline JavaScript ‘document.writeln()’ statements in both possible orders, and makes use of the built-in function ‘Math.random()’, which returns a random value between 0 and 1, to decide which one actually gets displayed. It is left to the reader, as an exercise, to find a way to tell the server which random order has been selected in any particular case.

Unlike our previous JavaScript examples, this one does not degrade gracefully on browsers where JavaScript is disabled, or otherwise not available; in fact it will not display any rating scale at all in these circumstances. However, in this case it is easy to supply a default HTML version for display in case scripting is unavailable: just include the original HTML code for the non-randomised version, enclosed between <NOSCRIPT> . . . </NOSCRIPT> tags, after the final </SCRIPT> tag. This piece of code will only be displayed if scripting is unavailable, so in such cases at least an unrandomised version will be displayed, and the methods described above should be sufficient to detect afterwards whether scripting was available or not.

Possibly related posts: (automatically generated)
Form Data Validation

• An ASP-Based Windows Server Script
• Web Pages / Internet / Online Hackers Studies continue...
• The HTML versus Text Format Decision
• A Simple UNIX Server Script
• Building Proper Links for your Website
• Primary, Secondary, and Caching-Only Name Servers
• The Active Directory and Dynamic DNS continue...
• Anatomy of the Online Store
• Adding JavaScript to the HTML Form
• What Is a Domain Tree? What Is a Forest?