1 1 Problem Statement V alidate the fiel ds in the given html form using JavaScript and regul ar expressions Requirements and Constraints Your implementation must absolutely respect the following requirements: Use jQuery [ 2 ] t o manipulate (access, update, and style) the Web from elements. Files to Create/Use and Main Steps to Follow 1. Create JavaScript file called script.js and link it to your form.html 1.1.1 Instructions and Requirements Your application must sh ow an error message using an alert box (Bootstrap status message). The number of errors must be shown as well as a detailed message for each and every invalid field. In case of an error, the alert box’s background color must be changed to light red. The al ert box must be controlled (hide/show) using jQuery [ 2 ] ( see Figure 3 for more details). The background of the invalid fields must be change to pink. You must use the jQuery [ 2 ] t o change the style properties of any HTML element The validation process must be triggered only and only upon submitting the web form. Therefore, the type of the submit button must be button and not submit Upon clicking the submit button , a function named validateFrom() must be called. This function does not receive any parameter. It validates the form’s elements one by one using regular expressions. You must also validate the length of the entered data. For exa mple: a password must be 6 to 8 characters long. If all the fields are valid, an alert box must be shown. The background color of valid fields must be light green (see Figure 2 ). 1.1.2 Fields Validation You are not allowed to use the required nor the pattern HTM L attribute that were introduced in HTML5. You must write the necessary JavaScript regular expression patterns according to the provided format to validate the following fields: 1. Student ID: as provided, must start with three letters followed by a dot, foll owed by three digits followed by a dot then followed by 1 to four digits. 2. Firstname: letters only; length: maximum 15 letters. 3. Lastname: letters only; length: maximum 25 letters. 4. Username: letters only; length: between 6 and 10 letters. 5. Password: length: m inimum 6 and maximum 8 characters. Must consist of digits, letters and special characters such as @, #, $ ,, etc. A valid password must contain at least 2 digits, at least two lowercase letters, at least one uppercase letter and at least one special characte r. 6. Gender: must be male or female (other than the default value which is unspecified). 7. Phone number: must start with left parenthesis followed by three digits followed by a right parenthesis followed by three digits followed by a dash and then followed by four digits. Format: (999)999 - 9999 8. Email address: must be a valid email address (see Email address format ) 9. Date of birth: format: mm - dd - yyyy. 10. Postal code: must be a valid Canadian postal code. Have a look at the structure of the Postal Code 11. Street: not em pty. 12. City: not empty, only letters. 13. Province: not empty, only letters. Hint: you can use JavaScript only to check whether a field is empty or not 3 Functions to Implement Y ou must absolutely implement the following functions. However, you are strongly recom mended to implement other functions if you judge necessary. 1. validateForm() : this function does not receive any parameters and must be called upon submitting the form. Hint : you need to use the proper JS event that triggers the call of this function. This f unction validates each and every field defined in the form using JS and regex according to the specified data format (see Section 5.3.2 ). 2. changeLablelColor() : this function receives a field label’s id as parameter and changes its text color to red. 3. resetLa belColor() : this function receives a field label’s id as parameter and resets its text color to black. 4. showErrors() : this function receives an array of strings as parameter containing the error messages to be displayed. It also shows the error alert box. Note that the alert box must be initially hidden. 5. showSuccess() : this function does not receive any parameter. It sh ows the success alert box. Use jQuery [ 2 ] a s instructed in pr evious section Figure 2: Form after successful validation Figure 3: The error messages to be displayed