(Solved): 10.13 LAB: User Registration and ValidationCreate a webpage consisting of HTML (register.html), CSS( ...

10.13 LAB: User Registration and Validation

Create a webpage consisting of HTML (register.html), CSS(style.css), and JavaScript (register.js) files that implement auser registration form with form validation.

The webpage styling should be close to the following. Note:Specific styles listed in the requirements will be checked usingautomated tests, but a visual inspection may also be used to checkthe overall style of the webpage.

1. User inputs elements: Define the following<input> elements using the specified IDs

   • Text <input> element with ID fullName and label "FullName"
   • Email <input> element with ID email and label"Email"
   • Password <input> element with ID password and label"Password"
   • Password <input> element with ID passwordConfirm andlabel "Confirm Password"
   • Submit <input> element with ID submit and value"Register"
   • The default border for the test, email, and password<input> elements should be 1 pixel, solid, with color#aaa
   • Use a <form> element.

2. <div> for errors: Create a <div>with ID formErrors that will be used to display any validationerrors.

   • Initially the <div> should not be displayed (i.e., thedisplay style should be none)

3. Form validation: Complete checkForm() to verifythat the user provided information is valid.

   • If there are form validation errors,
     • The formErrors <div> should be shown by setting displayto block
     • Each of the associated error messages should be displayed inthe formErrors <div> using an unordered list with red text.The error message must be displayed in the order the validation isperformed, following the order specified below.
     • Each <input> element with the invalid input should bestyled with a 2 pixel, red, solid border.
       • Otherwise, the default border should be used (1 pixel, solid,with color #aaa)
   • If there are no form validation errors,
     • The formErrors <div> should not be shown (i.e., thedisplay style should be none)
     • All test, email, and password <input> elements should usethe default border of 1 pixel, solid, color #aaa
   • Perform the following form validations in the order providedand display all error messages that apply
     • Ensure a full name with a length greater than or equal to 1 wasprovided
       • Otherwise, display "Missing full name."
     • Ensure that an email address was provided and that the emailaddress matches the regular expression:/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,5}$/
       • Otherwise, display "Invalid or missing email address."
     • Ensure the password has 10 to 20 characters
       • Otherwise, display "Password must be between 10 and 20characters."
     • Ensure the password contains at least one lowercase character
       • Otherwise, display "Password must contain at least onelowercase character."
     • Ensure the password contains at least one uppercase character
       • Otherwise, display "Password must contain at least oneuppercase character."
     • Ensure the password contains at least one digit
       • Otherwise, display "Password must contain at least onedigit."
     • Ensure the password and confirmation password match
       • Otherwise, display "Password and confirmation password don'tmatch."

LAB

User Registration Full Name Example Name Email valid@example.com Password Confirm Password Password must be between 10 and 20 characters. Password must contain at least one lowercase character. Password must contain at least one uppercase character. Register Show transcribed image text User Registration Full Name Example Name Email valid@example.com Password Confirm Password Password must be between 10 and 20 characters. Password must contain at least one lowercase character. Password must contain at least one uppercase character. Register