Validate Form fields. 

Add JavaScript code to this form validateFormSp09, to validate input data.  Right mouse click on this link to download this page to  your local work space, to make changes, or I've placed the file in my progdata folder.   An edited version of the code on this page in pdf format.  When the page opens it looks like this:

(click on the images to view a full-sized picture)

Your JavaScript function should validate that the following conditions are met:

  1. All fields have data entered.
  2. The fields intended to hold area code and phone number, (field names:  name="acode" and  name="phone" ) should only contain numeric input.
  3. The passwords input are valid, where valid passwords:
    1. Passwords only contain alpha numeric characters. (alphabetic or numeric characters)
    2. Password must contain at least one lowercase letter, one uppercase letter, and one numeric digit.
    3. Password must be between 6 and 50 characters long.
    4. the two strings entered in the text fields named: Password & PasswordConfirm matched.
  4. Display an alert box with an appropriate message when any of these conditions are not met.
  5. If ALL of the conditions for a valid form are met then display an alert box confirming the input.

Example Screen captures of form input with results:

Non-numeric input for Area code or phone, note the - in 762-
 Missing Data in fields:
Invalid password entered or 2 passwords input did not match.

 Valid Input Feedback:

Grade Rubric

Task Points Description
A
 10 Your program validates all input fields have data input or selected, displaying an alert box if data missing.
B
 5 Your program validates that only numbers are entered in the phone number fields, displaying an alert box if non-numeric data input.
C
 6 Your program validates that the two input passwords were equivalent, displaying an alert box if passwords do not match.
D
 6 Your program validates that the input passwords were between 6 and 50 characters long. Displaying an alert box if passwords are not within this range.
E
 6 Your program validates that the input passwords  contained only alpha numeric characters. (alphabetic or numeric characters) Displaying an alert box if passwords did not meet this rule.
F
 6 Your program validates that the input passwords  contained at least one lowercase letter and one uppercase letter. Displaying an alert box if passwords did not meet this rule.
G
 6 Your program validates that the input passwords  contained one numeric digit. Displaying an alert box if passwords did not meet this rule.
H
 5 Your program displays an alert box with an appropriate message if form input is valid in all aspects.
50
 Total Points

Hints:

For starters look at the example in the John Gilson notes where validation is done to verify that all form fields have been filled in, in my password protected directory.  (I've emailed everyone the password, so check your umflint email account)

 

[top]