Java Script validation

Assignment 2

Why are we doing this?

JavaScript is one of the most useful tools available to the web developer. It is

indispensable for creating user interfaces, which minimize the number of mistakes a user

can make and thus making it easier to store and retrieve data. It's very important for you

to understand when and how to implement JavaScript in your web pages. The lectures

will cover the "when" and this assignment will cover the "how" of implementing

JavaScript.

Bootstrap MAY NOT be used for any projects in this course

The Assignment

Overview: Using the user login form you created for a local Bookstore called The Story

Keeper Bookstore (TSKB) you will enhance it so that validates a salesperson’s data and

verifies the salesperson’s name, the salesperson’s password and the salesperson’s ID.

Task Description: Scenario

In order to access TSKB’s site, a salesperson must login with a valid username, user

password, user ID and user phone number. A user’s email address is also required only if

the user wants an email confirmation of any transaction (The user will indicate this by

checking a box signifying the user wants email confirmation). Develop the login script

using JavaScript that first validates and then verifies the user input.

Validation ensure that the salesperson has entered all the required data: username, user

password, user ID, user phone number and user email address (if requested). The user

password should contain a max of 10 characters and have at least 1 uppercase letter, one

special character and one numeric character, the user ID field should contain an 8-digit

number, the user phone number should consist of 10 digits which can be delineated either

by spaces or dashes and the email address must contain an @ followed by a period and an

email domain that consists of 2 to 5 characters. If the input is invalid, an alert should be

issued to the user to correct the particular error in the appropriate box. The alert should be

specific regarding what the error is and how it can be corrected. Alerts must be issued

one at a time (meaning only a single error appears in the alert). No new alert should

be displayed before the previous issue is rectified. After the alert is issued the user

should be brought back to the field that had invalid data entered so it can be re-

entered.

Verification checks that the salesperson has an account, i.e., that the username, user

password and user ID match the name, password and ID for one of TSKB’s salesperson.

If the input is not verified, alert the user that an account for them cannot be found. The

alert should contain a message indicating the name of salesperson and that they cannot be

found. Once the input is both validated and verified, alert the user with a simple

welcome message that they have entered the system indicating the salesperson’s name

(first and last) and the transaction chosen (Search the Books Seller’s Account,

Customer’s Book Purchase, Customer’s Book Return, Update a Customer’s Book Order,

Cancel a Customer’s Book Order, Search for a Book or Create a New Customer’s

Account).

Program Design and Implementation

The design for the HTML interface was developed in Assignment 1. It consisted of the

following fields: salesperson’s name, salesperson’s phone number and salesperson’s

email address, salesperson’s password, salesperson’s ID, a checkbox for indicating an

email confirmation is requested, a drop-down list allowing the salesperson to indicate

what type of transaction they wish to perform, and buttons as input elements.

In this assignment you will need to implement the functionality for email checkbox

which consists of requiring an email address is entered when the checkbox is checked.

The figures below illustrate some of the various concepts discussed for implementation of

this assignment.

Email confirmation wanted

Email Confirmation not wanted

Sample Error Message

Sample Cursor Brought Back to Field

Modularize your JavaScript using two functions: validate and verify described below.

Your event-driven program should call the validate function when the “Submit” button

on your form is clicked. If all the data has been entered correctly, the validate function

then calls the verify function. The “Reset” button will clear all data from the form.

Validate Function:

INPUT: HTML Form that needs to be validated

PROCESS: Validates that all required information exists and conforms to requirements:

Salesperson Name (First and Last), Salesperson Password, Salesperson Phone Number,

Saleperson ID and Salesperson Email Address (ONLY if required).

Validation MUST take place in your JavaScript via REGEX for patterns. No

validation should be done via your <input> element/tag attribute(s) (i.e., patterns,

length, number, email, etc.).

OUPUT: Alert the user to correct any particular error in the appropriate box if necessary

Verification Function:

INPUT: HTML Form with Salesperson Name (First and Last), Salesperson Password

and Salesperson ID

PROCESS: Compares the form's Salesperson Name (First and Last), Salesperson

Password and Salesperson ID with the properties of a salesperson object stored in a

global array of salespersons (for this exercise create an array of 8 salespersons). Returns

true if it finds the salesperson object matches the inputted data.

OUPUT: Simple welcome message consisting of the Salesperson’s name (first and last)

and the Transaction chosen from the dropdown menu or message indicating that the

specific salesperson cannot be found.

Make sure to test you program with a variety of valid and invalid input to ensure that

your program is properly validating the data, properly verifying the salesperson and that

all alerts are working as described.

Debugging:

Please read over my posting under Week 0 called Web Development Tools. This posting

will give you information on how to activate your browser’s DevTools that will aid in the

debugging process.

ALSO please upload your files and a URL where the files are contained in

"Canvas".

Points will be deducted for any missing files or missing url.

URL format for your webpage:

web.njit.edu/~YOUR UCID/YOUR FILE NAME

YOUR UCID is replaced with your UCID

YOUR FILE NAME is replaced with the name of the file you wish to execute

The following URL will give you step by step instructions on how to submit your

assignment files.

https://community.canvaslms.com/docs/DOC-10663-4212543

Good luck.

Maura