Can you help me with this lab task?
Web Development COS10005 – Web Development Last Updated: 12th October 2020 Page 1 Department of Foundation and Pathways Swinburne University of Technology COS10024 – Web Development Week 9 - Tutorial Activity 2 Lab 9 – JavaScript DOM Aims: • To practice how to create a form data checking/validation function for a HTML form using JavaScript while maintaining clear separation of HTML, CSS and JS files. • To review JavaScript functions and control structure • To gain the skills and knowledge to complete Assignment 2 Task 1: Create Form Validation using JavaScript (2 marks) Description: Again, we are going to start with a registration form, and then define and add a client-side form data validation function using JavaScript. In this lab, we will be using the JavaScript alert function to display the error message. As an extension, you may want to display the error message within the web page instead of using alert. Remember to design the form interaction carefully before you start coding, i.e., when and what to do in response to what event. Design: Design starts with discussion and paper drawings. Ensure this process is completed before implementation. Step 1: Form (HTML and CSS) 1.1 The design will be adapted from the form presented in Figure 1. For this lab, the error messages will be displayed using the JavaScript alert function, so no CSS solution will be needed. However, if you do decide to display error messages within the web page, you will need to design the interaction. You are encouraged to investigate and attempt the later approach. COS10005 – Web Development Last Updated: 12th October 2020 Page 2 Step 2: (JavaScript) 2.1 Identify which input fields in the form should be evaluated and what rules should apply. Answer: For this task, we need to evaluate all input fields. The rules are: (1) All input fields must not be empty; (2) User ID must contain at one ‘@’ symbol to be a valid email address; (3) Password and retype password must have the same value; and (4) Name must be letters and spaces only. Implementation: Implementation requires the creation and revision of HTML, CSS and JavaScript files. Step 3: Directory Set Up 3.1 Create a new folder ‘lab09’ under the unit folder on the mercury server ~/COS10005/www/htdocs. This is the directory where all files will be uploaded. Step 4: 4.1 Download lab_09_files.zip from the Canvas. Use the files in the zip file as templates for this lab. Step 5: HTML Creation 5.1 Using NotePad++ (or SubLime Text for Mac users), open file regform2.html. Review the HTML and complete the code. For your convenience, the basic code and additional code is shown below. Make sure you understand the added code. (1)link to desktop CSS file______________________ (2)link to JavaScript data validation file_______________ Web Development Registration Form Registration Form Account Information ----------------------------------------- User ID sam ple Password R e Re-type Password User Information --------------------------------------------- Name Gender O Male O Female Test Register Figure 1. Form Mock Up Format Incorrect In the page solution: An individual m ess age would be displayed i n twebpag e i t h d aentered was incorrect COS10005 – Web Development Last Updated: 12th October 2020 Page 3
Discussion (1) link to desktop CSS file Answer: (2) link to JavaScript data validation file Answer: (3) add a form identifier, so we can easily reference the form object Answer: id="regform" Step 6: CSS Creation (for the form) 6.1 Open file desktop.css, review the CSS and the questions below. For your convenience, the code is shown below: COS10005 – Web Development Last Updated: 12th October 2020 Page 4 Discussion (4) What happens if “border:none” is removed from the fieldset declaration? COS10005 – Web Development Last Updated: 12th October 2020 Page 5 Answer: The input for gender will be enclosed in a fieldset box, the word "Gender" – the legend - will be in the box, not in its default position along the top left of the box. (5) Why is there a blank space and not a comma between these selectors? However, in a previous lab we used a comma, for example h1, h2, p { color : blue; } Answer: A blank space represents a contextual selector. This means that the style is to be applied only to HTML elements that are descendants of the class "radioinput". Note that when the border was set to none (as was asked in question 6) the fieldset for Account and User Information still retains its border. "Comma" represents a grouping selector. This means that the style rule is to be applied to all to these HTML elements. In the above grouping example, the color:blue will be applied to all h1, all h2 and all p, unless it is overridden by another later CSS declaration. Step 7: JavaScript Creation (for the form data validation) 7.1 Open the text file validation.js, review the JavaScript and the questions below. For your convenience, the basic code and additional code is shown below: COS10005 – Web Development Last Updated: 12th October 2020 Page 6 COS10005 – Web Development Last Updated: 12th October 2020 Page 7 (6) The property value has been used to access the text input, in the previous four line of code. What property needs to be used to access the radio input values? Answer: The property is checked, thus to obtain the value stored in a radio input, the following JavaScript code needs to be added: var genm = document.getElementById("genm").checked; var genf = document.getElementById("genf").checked; (7) How would you check if each input field is empty? Answer: Add the following JavaScript Code: if (sid == "") { errMsg += "User ID cannot be empty.\n"; \n will create a ‘new line’ code in the message, that } will be displayed in the if (pwd1 == "") { alert errMsg += "Password cannot be empty.\n"; } if (pwd2 == "") { errMsg += "Retype password cannot be empty.\n"; } if (uname == "") { errMsg += "User name cannot be empty.\n"; } if ((genm == "")&&(genf == "")) { errMsg += "A gender must be selected.\n"; } Note: You need to test all options in a radio input. In this case, both genm and genf must be tested. (8) How would you check if an input field contains an @ symbol? Answer: Add the following JavaScript code: if (sid.indexOf('@') == 0 ) { errMsg += "User ID cannot start with an @ symbol.\n"; } if (sid.indexOf('@') < 0 ) { errmsg += "user id must contain an @ symbol.\n"; } note: this is simplistic way to check if the input is an email address. a better solution would be to use a regular expression. an example of a regular expression is included in this lab, to check if the name input field only contains only letters and/or spaces. see the 0="" )="" {="" errmsg="" +="User ID must contain an @ symbol.\n" ;="" }="" note:="" this="" is="" simplistic="" way="" to="" check="" if="" the="" input="" is="" an="" email="" address.="" a="" better="" solution="" would="" be="" to="" use="" a="" regular="" expression.="" an="" example="" of="" a="" regular="" expression="" is="" included="" in="" this="" lab,="" to="" check="" if="" the="" name="" input="" field="" only="" contains="" only="" letters="" and/or="" spaces.="" see="">