Complete the following Exercise Tasks 1 Using the included validate html file as the starting point, complete the following a Make the title of the web page Login Form b Insert the proper tag to include the utf 8 character set c Insert the proper attributes in the opening tag (1) the action should be process php (2) the method should be post (3) the name and id should both be loginform d Both the username and password input fields should be required e The Submit button should say Log In f For this task, add a pattern attribute to the password input element that uses a regex Use this link as a reference https www w3schools com tags att input pattern asp Lets implement slightly more robust password requirements in our exercise The regex should check, at a minimum, that the input contains 15 or more characters that include least one number, one uppercase latter, one lowercase letter, and one special character ( , $, , or ) Refer to the examples on the reference site and add the proper pattern attribute and regex to the password input field 2 Style the HTML file using the included css txt file a Create a element section in the proper place in the validate html file b Copy and paste all the content in the completed css txt file into the section 3 Complete the validation script using the included validation txt file a Create a element section just above the closing tag in the validate html file b Copy and paste all the content in the incomplete validation txt file into the section c Where directed in the comments, create a variable called letter and assign it the html element with the id letter d Where directed in the comments, create a variable called capital and assign it the html element with the id capital e Where directed in the comments, create a variable called number and assign it the html element with the id number f Where directed in the comments, create a variable called special and assign it the html element with the id special g Where directed in the comments, create a variable called length and assign it the html element with the id length h Where directed in the comments, replace uuuu with the property that triggers an event when the password input box receives focus i Where directed in the comments, replace vvvv with the property that triggers an event when the password input box loses focus j Where directed in the comments, replace wwww with the property that triggers an event when the user releases a key in the input box k Where directed in the comments, replace xxxx with the proper regex pattern to match the special characters l Where directed in the comments, replace yyyy with the correct value to check the string length css txt below Style all input fields input width 100 padding 12px border 1px solid ccc border radius 4px box sizing border box margin top 6px margin bottom 16px Style the submit button sub background color 4CAF50 color white Style the container for inputs container width 300px margin 0 auto background color f1f1f1 padding 20px The message box is shown only when the user clicks on the password field message display none width 300px margin 0 auto background f1f1f1 color 000 position relative padding 20px margin top 10px message p padding 10px 35px font size 18px Add a green text color when the requirements are right valid color green Add a red text color when the requirements are wrong invalid color red validation txt below var myInput document getElementById( psw ) TASK c create a variable called letter and assign it the html element with the id letter TASK d create a variable called capital and assign it the html element with the id capital TASK e create a variable called number and assign it the html element with the id number TASK f create a variable called special and assign it the html element with the id special TASK g create a variable called length and assign it the html element with the id length When the user clicks on the password field, show the message box TASK h replace uuuu with the property that triggers an event when the password input box receives focus myInput uuuu function() document getElementById( message ) style display block When the user clicks outside of the password field, hide the message box TASK i replace vvvv with the property that triggers an event when the password input box loses focus myInput vvvv function() document getElementById( message ) style display none When the user starts to type something inside the password field TASK j replace wwww with the property that triggers an event when the user releases a key in the input box myInput wwww function() Validate lowercase letters var lowerCaseLetters a z g if(myInput value match(lowerCaseLetters)) letter classList remove( invalid ) letter classList add( valid ) else letter classList remove( valid ) letter classList add( invalid ) Validate capital letters var upperCaseLetters A Z g if(myInput value match(upperCaseLetters)) capital classList remove( invalid ) capital classList add( valid ) else capital classList remove( valid ) capital classList add( invalid ) Validate numbers var numbers 0 9 g if(myInput value match(numbers)) number classList remove( invalid ) number classList add( valid ) else number classList remove( valid ) number classList add( invalid ) Validate special characters TASK k replace xxxx with the proper regex pattern to match the special characters var specialCharacters xxxx g if(myInput value match(specialCharacters)) special classList remove( invalid ) special classList add( valid ) else special classList remove( valid ) special classList add( invalid ) Validate length TASK l replace yyyy with the correct value to check the string length if(myInput value length yyyy) length classList remove( invalid ) length classList add( valid ) else length classList remove( valid ) length classList add( invalid ) Here is what I have so far Login Form Style all input fields input width 100 padding 12px border 1px solid ccc border radius 4px box sizing border box margin top 6px margin bottom 16px Style the submit button sub background color 4CAF50 color white Style the container for inputs container width 300px margin 0 auto background color f1f1f1 padding 20px The message box is shown only when the user clicks on the password field message display none width 300px margin 0 auto background f1f1f1 color 000 position relative padding 20px margin top 10px message p padding 10px 35px font size 18px Add a green text color when the requirements are right valid color green Add a red text color when the requirements are wrong invalid color red User name User password var myInput document getElementById( psw ) TASK c create a variable called letter and assign it the html element with the id letter TASK d create a variable called capital and assign it the html element with the id capital TASK e create a variable called number and assign it the html element with the id number TASK f create a variable called special and assign it the html element with the id special TASK g create a variable called length and assign it the html element with the id length When the user clicks on the password field, show the message box TASK h replace uuuu with the property that triggers an event when the password input box receives focus myInput uuuu function() document getElementById( message ) style display block When the user clicks outside of the password field, hide the message box TASK i replace vvvv with the property that triggers an event when the password input box loses focus myInput vvvv function() document getElementById( message ) style display none When the user starts to type something inside the password field TASK j replace wwww with the property that triggers an event when the user releases a key in the input box myInput wwww function() Validate lowercase letters var lowerCaseLetters a z g if(myInput value match(lowerCaseLetters)) letter classList remove( invalid ) letter classList add( valid ) else letter classList remove( valid ) letter classList add( invalid ) Validate capital letters var upperCaseLetters A Z g if(myInput value match(upperCaseLetters)) capital classList remove( invalid ) capital classList add( valid ) else capital classList remove( valid ) capital classList add( invalid ) Validate numbers var numbers 0 9 g if(myInput value match(numbers)) number classList remove( invalid ) number classList add( valid ) else number classList remove( valid ) number classList add( invalid ) Validate special characters TASK k replace xxxx with the proper regex pattern to match the special characters var specialCharacters xxxx g if(myInput value match(specialCharacters)) special classList remove( invalid ) special classList add( valid ) else special classList remove( valid ) special classList add( invalid ) Validate length TASK l replace yyyy with the correct value to check the string length if(myInput value length yyyy) length classList remove( invalid ) length classList add( valid ) else length classList remove( valid ) length classList add( invalid )

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Jul 28, 2024

Complete the following Exercise Tasks 1. Using the included validate.html file as the starting point, complete the following a. Make the title of the web

Complete the following Exercise Tasks

1. Using the included validate.html file as the starting point, complete the following

a. Make the title of the web page Login Form

b. Insert the proper tag to include the utf-8 character set

c. Insert the proper attributes in the opening

tag

(1) the action should be process.php

(2) the method should be post

(3) the name and id should both be loginform

d. Both the username and password input fields should be required

e. The Submit button should say Log In

f. For this task, add a pattern attribute to the password input element that uses a regex. Use this link as a reference: https://www.w3schools.com/tags/att_input_pattern.asp. Lets implement slightly more robust password requirements in our exercise. The regex should check, at a minimum, that the input contains 15 or more characters that include least one number, one uppercase latter, one lowercase letter, and one special character (_, $, ^, or !). Refer to the examples on the reference site and add the proper pattern attribute and regex to the password input field.

2. Style the HTML file using the included css.txt file

a. Create a element section in the proper place in the validate.html file

b. Copy and paste all the content in the completed css.txt file into the User name: User password: