Validating User Input

You want ensure that only the values 0, 1, 2, 3, 4, or 5 to be entered into the RATE component fields. Therefore, you have to include some way of checking the participant's entries in these fields to make sure that they are valid. If the user enters an incorrect value in one of the component fields, two things must happen:

• The browser should display a dialog box informing the user of the mistake.
  
• The cursor should be positioned back in the field in which the user entered the incorrect value, preventing the user from leaving the field until a valid value has been entered.

This presents a problem because eight different component fields could be accessing the RATE() function at any time. To make this work, you have to pass information to the function, indicating which field is using it. You do this with the "this" keyword.

Return to the surveyform.html file in your text editor and go to the <INPUT> tag for the Content field. In the code onBlur="RATE();" type the word this within the parentheses as follows:

<INPUT NAME=CONTENT VALUE=0 SIZE=1 MAXLENGTH=1 onBlur="RATE(this);">

Repeat inserting the word this in the remaining seven category fields. Save your changes.

Now that you have added the "this" keyword, you need to make several changes to the function itself. First, the function must store the value of the active field in a variable. Then it needs to test whether or not the value of that variable is equal to 0, 1, 2, 3, 4, or 5. If it is, the function can calculate the total RATE score as before; is not, the function should alert the user that a mistake has been made and return the cursor to the appropriate field so that the user can enter the correct value.

Return to the RATE() function in the head section of your HTML file. In the line"function RATE() {" type the word field within the parentheses. Add the following two lines below the function RATE(field) } (indented three spaces to make the code easier to follow):

var score = field.value;

if(score==0 || score==1 || score==2 || score==3 || score==4 || score==5) {

The | symbol is often located above the \ symbol on your keyboard. You can type it by pressing the \ key while holding down the Shift key.

Insert the following commands above the last line (the closing brace}) of the function above (indented three spaces):

} else {

//alert the user

field.focus();

}

Your RATE() changes should look like the following but with your modifications:

function RATE(field) {

var score = field.value; if(score==0 || score==1 || score==2 || score==3 || score==4 || score==5) {

var C = eval(document.SVY.CONTENT.value);

var G= eval(document.SVY.GRAPHICS.value);

var O= eval(document.SVY.ORGANIZATION.value);

var N = eval(document.SVY.NAVIGATION.value);

var R = eval(document.SVY.GRAMMATIC.value);

var L= eval(document.SVY.LAYOUT.value);

var P= eval(document.SVY.CONTACT.value);

var S= eval(document.SVY.SPEED.value);
document.SVY.TOTAL.value = C + G + O + N + R + L + P + S;

} else {

//alert the user

field.focus();

}

}

//Stop Hiding

</SCRIPT>

Save your changes.