Lab Question [10 marks] Step 1: Create the HTML Form For the registration we want to collect the following user information: 1. First name 2. Last name 3. Email 4. Password So, lets create our form containing these input fields:

Registration

First Name Last Name Email Password Register

When integrating this into a real application, dont forget to fill in the action attribute, to make sure the form is submitted to the correct destination. Step 2: Create Styles for the Form Create a new file, css/styles.css, and include it in the

section of your HTML file: Copy the following styles into the newly created file: /* Styles */ * { margin: 0; padding: 0; } body { font-family: "Open Sans"; font-size: 14px; } .container { width: 500px; margin: 25px auto; } form { padding: 20px; background: #2c3e50; color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } form label, form input, form button { border: 0; margin-bottom: 3px; display: block; width: 100%; } form input { height: 25px; line-height: 25px; background: #fff; color: #000; padding: 0 6px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } form button { height: 30px; line-height: 30px; background: #e67e22; color: #fff; margin-top: 10px; cursor: pointer; } form .error { color: #ff0000; } Note the styles for .error, which will be used for validation error messages. Step 3: Create the Validation Rules Create a file called validation.js Using JQuery, write code to completely validate the form to the specifications outlined below: 1) All fields are required 2) The name fields must contain no numbers 3) The password must be at least 8 characters long and contain at least one letter, number and special character (either an exclamation mark(!) or a dollar sign($)) Upon correct validation, an Alert box should display the information entered in a neat format line by line.