Form Validation

Write validation functions and modify the onSubmit event Handler in the form code to validate the following form fields:

1. Member number
   • Must be entered
   • Must be a number
     
2. Password
• Must be entered
• Must be longer than 4 characters

If an error occurs, use an alert box to display an error message for the first field in error and place the cursor in the first field in error.

Right click here and use Save Link As (or Save Target As) to download the HTML file (the form is illustrated below)

Be sure to test your code in both Internet Explorer and Firefox.

Steps

1. Add the code to put the cursor in the first field on the form (Member Number) when the page first loads
   
   
   
   • Place the onLoad event handler in the body tag
   • Include a reference to the field name and use the focus() method to put the cursor in the field
   • Save your changes and refresh the form and verify that your changes worked
     
     
2. Add the code to the form tag to run the function validateForm when the form is submitted.
   
   
   
   • Save your changes, refresh the page in the browser, and click the Submit button. Examine the alert box
   • It should give you the message that the boolean variable validForm has a value of true
   • What happens when you click OK?
     
     
3. In the function validateForm(), change the initial value of the variable to false: var validForm=false;
   
   
   
   • Save your changes, refresh the page in the browser, and click the Submit button. Examine the alert box.
   • What message displays?
   • What happens when you click OK?
     
     
4. After the onSubmit event handler, but inside the quote marks, add the word return in front of the function call.
   
   
   
   • Save your changes, refresh the page in the browser, and click the Submit button. Examine the alert box.
   • Now what happens when you click OK?
   • The return in the validateForm function with a value of false returns back to the function call, replacing the function call. This in turn is returned to the form, and a value of false tells the form not to continue with the submit process.
     
     
5. In the function validateForm(), change the initial value of the variable back to true.
   Then remove the two slashes commenting out the validForm = validateNumber(); line of code.
   Make changes in the validateNumber() function to do the following. Refer to the form validation notes and example:
   
   
   
   • Set a boolean variable to true in the beginning of the function
   • Set a variable to store the value of the memberNumber field
   • Code an if statement to see if the field contains any characters
   • If the field contains no characters, use an alert box to display a meaningful message and set the boolean variable to false
   • Return the boolean variable
   • Save your changes, refresh the page in the browser, and click the Submit button.
   • Test the field using no data in the field and good data in the field
   • If there is bad data in the field, the submit process should not continue
     
     
6. Add an else statement after the closing curly bracket of the if statement in the function validateNumber(). Then do the following:
   
   
   
   • Use the JavaScript Number() function to store the numeric value of the memberNumber field in a variable called numField.
   • Add an if statement to test to see if the memberNumber field contains a number.
   • If the memberNumber field does not contain a number, use an alert box to display a meaningful message and set the boolean variable to false.
   • Save your changes, refresh the page in the browser, and click the Submit button.
   • Test the field using non-numeric data in the field and numeric data in the field
   • If there is non-numeric data in the field, the submit process should not continue
     
     
7. Using the code written for the memberNumber field, add code to the password field to verify the following:
   
   
   
   • Check to see if there are any characters in the password field
   • Check to see if the length of the password field is greater than four characters
   • Save your changes, refresh the page in the browser, and click the Submit button.
   • Test the password field using zero characters, characters less than five, exactly five characters, and more than five characters
   • If there are not at least 5 characters, the submit process should not continue
     
     
8. Comment out the line in the validateForm function that displays the alert box and save your work.:
   //alert('In function validateForm. validForm = '+validForm);
   Refresh the Web page and enter all valid data in the two entry fields.
   
   
   • Examine the data sent to the server. Notice the date sent in the currentDate field, which is a hidden field on your form.
   • Click the Back You Go button and click the Reset button on your form, add some valid data, then submit the form again.
   • Notice that the reset button does not clear the value of the hidden field if you are in Firefox, but it will clear the hidden field in Internet Explorer.
     
     
9. To fix the above problem, make the following changes:
   
   
   
   • Add the following code inside the form tag, but after the onSubmit event handler and action: onReset="location.reload();"
   • The reset button resets the form field values, but does not re-create any initial values that were set by JavaScript when the form first loaded.
   • The browser refresh (or reload) button does not clear any form fields.
   • The reload method of the location object (the address line where you enter a Web address): location.reload() causes the Web page to reload.
   • By invoking this when the reset button is clicked two things happen:
     
     
   1. The default action for the reset button occurs first, resetting the form fields to their initial values (null in this case)
   2. The onReset event handler causes the Web page to reload, which in turn fires the onLoad event handler in the body, putting the cursor in the first field and also inserting the date into both the hidden form field and the Web page via the document.write().
      
      
   • Thus the Web page is restored to its original state when the reset button is clicked.
     
     
10. An explanation of the code of the currentDate hidden field:
    
    
    
    • The document.write(getDate()); function call runs the getDate() function after the hidden field is defined in the Web page. The getDate function has the following code:
    • Store the system date in a variable called Today: Today=new Date();
    • Use the getDate date method to extract the day of the month into a variable: var ThisDay=Today.getDate();
    • Use the getMonth() function to extract the month number, which starts with zero, and then add one to it to start with month
      var ThisMonth=Today.getMonth()+1;
    • Use the getMonth() function to extract the four digit year ThisYear=Today.getFullYear();
    • Concatenate the month, a slash, the day, another slash, and the year to form the fullDate:
      var fullDate=ThisMonth+"/"+ThisDay+"/"+ThisYear;
    • Store the full date in the hidden field: document.logon.currentDate.value=fullDate;
    • Return the fullDate to the document.write. The return value replaces the function call and gets written to the Web page.
    • This is an example of where JavaScript code needs to be included in the body of the Web page.
      
      
11. Demonstrate the final Web page to your instructor.