LAB Test 1. Rules and Regulations:-

Size: px

Start display at page:

Download "LAB Test 1. Rules and Regulations:-"

Christopher Harrington
5 years ago
Views:

1 LAB Test 1 Rules and Regulations:- 1. Individual Test 2. Start at 3.10 pm until 4.40 pm (1 Hour and 30 Minutes) 3. Open note test 4. Send the answer to h.a.sulaiman@ieee.org a. Subject: [LabTest] Your Full Name b. Content: Your Full Name, Matric ID, IC Number c. Attachment: Zip or Rar File Example:

2 Question: You are going to validate the HTML Form Inputs using Javascript: You can use JavaScript to valid an HTML form's input field before submitting the form data to the server. The JavaScript can verify that: 1. A input field is required and cannot be left empty. 2. A valid address (user@hostname.com) 3. A valid numeric string (e.g., phone number), or all-letter string

3 Steps 1. Copy or write the following file: Formvalidation.html <html> <head> <title>test JavaScript Form Validation</title> <link rel="stylesheet" href="formvalidation.css"> <script type="text/javascript" src="formvalidation.js" ></script> </head> <body> <h2>test JavaScript Form Validation</h2> <form id="theform" method="get" action="submitdata"> <table> <td>name<span class="red">*</span></td> <td><input type="text" id="name" name="name"/></td> <td id="nameerror" class="red"> </td></tr> <td>address</td> <td><input type="text" id="address" name="address" /></td> <td id="addresserror" class="red"> </td></tr> <td>zip Code<span class="red">*</span></td> <td><input type="text" id="zipcode" name="zipcode" /></td> <td id="zipcodeerror" class="red"> </td></tr> <td>country<span class="red">*</span></td> <td><select id="country" name="country"> <option value="" selected>please select...</option> <option value="aa">aa</option> <option value="bb">bb</option> <option value="cc">cc</option> </select><br /></td> <td id="countryerror" class="red"> </td></tr>

4 continue.. <td>gender<span class="red">*</span></td> <td><input type="radio" name="gender" value="m" />Male <input type="radio" name="gender" value="f" />Female</td> <td id="gendererror" class="red"> </td></tr> <td>preferences<span class="red">*</span></td> <td><input type="checkbox" name="color" value="r" />Red <input type="checkbox" name="color" value="g" />Green <input type="checkbox" name="color" value="b" />Blue</td> <td id="colorerror" class="red"> </td></tr> <td>phone<span class="red">*</span></td> <td><input type="text" id="phone" name="phone" /></td> <td id="phoneerror" class="red"> </td></tr> <td> <span class="red">*</span></td> <td><input type="text" id=" " name=" " /></td> <td id=" error" class="red"> </td></tr> <td> </td> <td><input type="submit" value="send" id="submit"/> <input type="reset" value="clear" id="reset"/></td> <td> </td></tr> </table> </form> </body> </html>

5 2. Copy and write the following file Formvalidation.css.red { /* for error messages */ color: red; input.error { /* for the error input text fields */ border: 1px red inset; padding: 2px; table { border: 0; td { margin: 0; padding: 3px 10px 3px 3px;

6 3. Complete the following javascript Formvalidation.js window.onload = init; function init() { document.getelementbyid("theform").onsubmit = validateform; document.getelementbyid("reset").onclick = cleardisplay; document.getelementbyid("name").focus(); function validateform() { return (isnotempty("name", "Please enter your name!") && isnumeric("zipcode", "Please enter a 5-digit zip code!") && islengthminmax("zipcode", "Please enter a 5-digit zip code!", 5, 5) && isselected("country", "Please make a selection!") && ischecked("gender", "Please check a gender!") && ischecked("color", "Please check a color!") && isnumeric("phone", "Please enter a valid phone number!") && isvalid (" ", "Enter a valid !")); // Return true if the input value is not empty function isnotempty(inputid, errormsg) { var inputvalue = inputelement.value.trim(); var isvalid = (inputvalue.length!== 0); // boolean

7 function showmessage(isvalid, inputelement, errormsg, errorelement) { if (!isvalid) { // Put up error message on errorelement or via alert() if (errorelement!== null) { errorelement.innerhtml = errormsg; else { alert(errormsg); // Change "class" of inputelement, so that CSS displays differently if (inputelement!== null) { inputelement.classname = "error"; inputelement.focus(); else { // Reset to normal display if (errorelement!== null) { errorelement.innerhtml = ""; if (inputelement!== null) { inputelement.classname = ""; // Return true if the input value contains only digits (at least one) function isnumeric(inputid, errormsg) { (a) 0.5 mark (b) 0.5 mark (c) 0.5 mark (d) 0.5 mark // Return true if the input value contains only letters (at least one) function isalphabetic(inputid, errormsg) { (e) 0.5 mark (f) 0.5 mark (g) 0.5 mark (h) 0.5 mark

8 // Return true if the input value contains only digits and letters (at least one) function isalphanumeric(inputid, errormsg) { var inputvalue = inputelement.value.trim(); var isvalid = inputvalue.match(/^[0-9a-za-z]+$/); // Return true if the input length is between minlength and maxlength function islengthminmax(inputid, errormsg, minlength, maxlength) { (i) 0.5 mark (j) 0.5 mark // Return true if the input value is a valid address function isvalid (inputid, errormsg) { (k) 0.5 mark (l) 0.5 mark (m) 0.5 mark (n) 0.5 mark

9 // Return true if selection is made (not default of "") in <select> input function isselected(inputid, errormsg) { var inputvalue = inputelement.value; // You need to set the default value of <select>'s <option> to "". var isvalid = inputvalue!== ""; // Return true if the one of the checkboxes or radio buttons is checked function ischecked(inputname, errormsg) { var inputelements = document.getelementsbyname(inputname); var errorelement = document.getelementbyid(inputname + "Error"); var ischecked = false; for (var i = 0; i < inputelements.length; i++) { if (inputelements[i].checked) { ischecked = true; // found one element checked break; showmessage(ischecked, null, errormsg, errorelement); return ischecked; // The "onclick" handler for the "reset" button to clear the display function cleardisplay() { var elms = document.getelementsbytagname("*"); // all tags for (var i = 0; i < elms.length; i++) { if ((elms[i].id).match(/error$/)) { // no endswith() in JS? elms[i].innerhtml = ""; if (elms[i].classname === "error") { // assume only one class elms[i].classname = ""; // Set initial focus document.getelementbyid("name").focus();

Controlled Assessment Task. Question 1 - Describe how this HTML code produces the form displayed in the browser.

Controlled Assessment Task. Question 1 - Describe how this HTML code produces the form displayed in the browser. Controlled Assessment Task Question 1 - Describe how this HTML code produces the form displayed in the browser. The form s code is displayed in the tags; this creates the object which is the visible