JavaScript 1.5 - Lab 5 pdf

Lab 5: Form Interaction 5-34 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 5: Form Interaction TIP: Because this lab includes a great deal of typed code, we‟ve tried to make it simpler for you. You will find all the completed code in ValidateMe.html and ValidateMe.js, in the same directory as the sample project. To avoid typing the code, use the exercise specific .js files ValidateMe_ex1.js, for exercise one, and ValidateMe_.ex2.js and ValidateMe_ex3.js respectively. Once you have completed each part, rename it ValidateMe.js to test it. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 5 Overview JavaScript 1.5 5-35 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 5 Overview In this lab you will learn to properly access various form elements, and how to validate values. To complete this lab, you will need to work through three exercises:  Terminal: Routing and Setup  Defining Validations  Display Results Each exercise includes an “Objective” section that describes the purpose of the exercise. You are encouraged to try to complete the exercise from the information given in the Objective section. If you require more information to complete the exercise, the Objective section is followed by detailed step-by- step instructions. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 5: Form Interaction 5-36 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Terminal: Routing and Setup Objective In this exercise, you will use a decision construct to direct different form elements to the appropriate validation function. Things to Consider  The type property for a select object returns as „select-one‟.  Text objects and Textarea objects can be validated similarly.  You cannot return the length property of a radio group accurately from the form.elements[] array. The reason is that when you call length on a single radio object, it always returns null.  The onSubmit() event handler of the form accepts a Boolean value indicating whether or not to process the submit request. Step-by-Step Instructions 1. You will be using the form found in the ValidateMe.html file. It would be helpful to glance through this file before you start the exercise, and take note of a few things within the file:  The file will look for the external .js file, ValidateMe.js.  The onsubmit event of form1 calls the function validateForm(), which serves as the main function of this application.  By design, form objects that have names beginning with underscore are required fields. 2. Open ValidateMe.js and ValidateMe.html. In ValidateMe.js, create the main function, validateForm(). Have the function accept a parameter called frm, which will be used to accept a form object. function validateForm(frm) { } 3. In the first few lines of the validateForm() function, define the variables submitform = true, reqChar = “_”, and currElement. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Terminal: Routing and Setup JavaScript 1.5 5-37 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. NOTE The submitform variable will ultimately determine whether the form is submitted or not. The reqChar variable represents the first character in the name of a required field on the form. The script, when complete, will know to look for this character to make sure that that current object has a value. Finally, the currElement variable represents the current element in any iteration of the forms.elements[] array. This is important to note, because when the ElementLoop is stopped because of a validation error, the currElement will hold the information about the object that was incorrect. function validateForm(frm) { var submitform = true; var reqChar = "_"; var currElement; 4. Under the variable declarations, create a label called ElementLoop and under that, create a for loop block. Iterate the loop for the length of frm with the condition: fo = 0; fo < frm.elements.length; fo++. var submitform = true; var reqChar = "_"; var currElement; ElementLoop: for (fo = 0; fo < frm.elements.length; fo++) { } 5. Within the loop block, create an if block. The purpose of the if block will be to catch only those elements that have the reqChar as the character at the first position in the string (charAt(0)), and to ignore any undefined elements (like the fieldset object). Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 5: Form Interaction 5-38 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. ElementLoop: for (fo = 0; fo < frm.elements.length; fo++) { if (frm.elements[fo].name != undefined && frm.elements[fo].name.charAt(0) == reqChar) { //Then this is an element to be validated. } } 6. The first statement in the if block must set currentElement to reference the currently selected form element in the iteration. if (frm.elements[fo].name != undefined && frm.elements[fo].name.charAt(0) == reqChar) { currElement = frm.elements[fo]; 7. On the next line, create a switch block with four cases, and no default block. The switch condition will be (currElement.type). The cases represent the element types that you want to validate. For this exercise they will be as follows: case “select-one”, case “radio”, case “text”, and case “textarea”. Be sure to add a break; statement to each case. if (frm.elements[fo].name != undefined && frm.elements[fo].name.charAt(0) == reqChar) { currElement = frm.elements[fo]; switch(currElement.type) { case "select-one": break; case "radio": break; case "text": break; case "textarea": break; } } Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Terminal: Routing and Setup JavaScript 1.5 5-39 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. 8. Right before the end of the main elements loop, add another if block with the statement if (!submitform) { break ElementLoop; }. This ensures that if an element does not evaluate to true, then the loop will stop iterating. case "textarea": break; } } if (!submitform) { break ElementLoop; } 9. Underneath the main function, define the validation utility functions. There will be a validation function for each type of object caught by the switch statement in validateForm. Each one will accept a frmobj, which is also the currElement of the form. Name the functions valSelect(), valRadio(), and valText(). function valSelect(frmobj) { } function valRadio(frmobj) { } function valText(frmobj) { } 10. One thing that each function has in common is a Boolean variable called valid. Start by defining valid as false; each function will eventually return the valid variable. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 5: Form Interaction 5-40 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. function valSelect(frmobj) { var valid = false; return valid; } function valRadio(frmobj) { var valid = false; return valid; } function valText(frmobj) { var valid = false; return valid; } 11. In the validateForm() function, each case is going to be nearly identical. Each one will define submitform using its corresponding utility function. For example, case “select-one” will define submitform by assigning it the return value of the function varSelect(currElement). NOTE The one exception to the rule is case “radio”. When the element in question is a radio button, currElement actually references an individual radio button object. The default value of an individual radio button‟s length is null. In this application, you just want to make sure one of several radio buttons is selected, so you must access the length attribute of the whole radio group. This is available by establishing a direct reference to the radio group name on the form (document.formname.radiogroupname), which coincidentally is the same as each radio button‟s name. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Terminal: Routing and Setup JavaScript 1.5 5-41 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. switch(currElement.type) { case "select-one": submitform = valSelect(currElement); break; case "radio": submitform = valRadio(eval("document." + frm.name + "." + currElement.name)); break; case "text": submitform = valText(currElement); break; case "textarea": submitform = valText(currElement); break; } 12. At the very end of the validateForm() function, the code determines whether to submit or not. So beneath the Element Loop, start an if/else statement, with the condition submitform. If submitform is true, return true from validateForm() back to the onsubmit event handler that called it. If submitform is false, return false. if (submitform) { return true; } else { return false; } 13. If the form validated as true, the application will generate an alert message: “The form is complete!”. If it is false, it will generate an alert message saying “The selected field was not completed.”, and then set focus to the element that is not valid. Because the ElementLoop breaks when a problem occurs, currElement will be the violating element. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 5: Form Interaction 5-42 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. if (submitform) { alert("The form is complete!"); return true; } else { alert("The selected field was not completed."); currElement.focus(); return false; } 14. Now you can test the exercise. The submitform variable will be false each time, because the validation utility functions have not yet been defined. Just make sure that there are no errors, and continue on to the next exercise. The result should look something like Figure 8. TIP: A form button called shortcut and its corresponding function have been added to the exercise files, so you can instantly fill in the form when shortcut is clicked to save some keystrokes. Figure 8. The result of this exercise. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Defining Validations JavaScript 1.5 5-43 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Defining Validations Objective In this exercise, you will set up the actual validation for the text, textarea, radio, and select objects. Things to Consider  For this example the select object‟s validation rule is that the current selected option must have a value, and may not contain an empty string. The default option, [Select], has an empty string for its value, and would therefore be considered invalid if it were submitted with the form.  For the radio group, none of the radio buttons are checked by default, but one radio button must be checked by the user to be considered a valid submission.  The default value for the text and textarea objects is an empty string, but these elements must contain some character data in order to be considered valid entries. Step-by-Step Instructions 1. You will start by defining the text/textarea validation function, valText() from the previous exercise. Create an if block just after the declaration of the valid variable. The expression for the if statement will be (frmobj.value.length > 0), to test whether the length of the entry is greater than zero; if so, the valid variable must be set to true with the statement valid = true;. function valText(frmobj) { var valid = false; if (frmobj.value.length > 0) { valid = true; } return valid; } Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. [...]... dungdq@edt.com.vn JavaScript 1 .5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 5- 4 5 Lab 5: Form Interaction Figure 9 The Alert Message box in ValidateMe.html Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 5- 4 6 For product evaluation only– not for distribution or commercial use .JavaScript. .. 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1 .5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 5- 4 9 Lab 5: Form Interaction Figure 10 The final page after it has been submitted successfully Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 5- 5 0 For product evaluation only–... quite a few built-in methods for setting its attributes: setYear(year); setFullYear(year); setMonth(0 - 11); setDate(1 – 31); setHours(0 – 23); setMinutes(0 – 59 ); setSeconds(0 – 59 ); setMilliseconds(0 - ); setTime(0 - ); setUTCFullYear(1970 - ); setUTCMonth(0 – 11); setUTCDate(1 – 31); setUTCDay(0 – 6); setUTCHours(0 – 23); setUTCMinutes(0 – 59 ); setUTCSeconds(0 – 59 ); setUTCMilliseconds(0 - ); Feb 19... JavaScript 1 .5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 6-7 Built-In Objects Date() Object The Date object was not widely accepted in the earlier days of JavaScript; it was buggy and had many cross-platform issues Fortunately, the Date object in JavaScript 1 .5. .. value: Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1 .5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 5- 4 7 Lab 5: Form Interaction //submitmsg is declared in 'ValidateMe.js'... 5- 5 0 For product evaluation only– not for distribution or commercial use .JavaScript 1 .5 Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited Built-In Objects Built-In Objects Objectives  Understand how the most common JavaScript objects are used  Discern the available information in the Navigator object  Discover how to use the Date... after the first instance of ―eed‖ in the word indeed Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1 .5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 6 -5 Built-In Objects String.replace(RegExp, string) See StringRegExp.html The replace method is similar to... such as 5, is specified, then the split() method will create an array that contains substrings for the first five delimiters it encounters in the string The split() method is quite helpful if you need to parse name-value pairs from the querystring of the request URL: Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 6-6 For product evaluation only– not for distribution or commercial use .JavaScript 1 .5 Copyright... dungdq@edt.com.vn 5- 4 4 For product evaluation only– not for distribution or commercial use .JavaScript 1 .5 Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited Defining Validations function valRadio(frmobj) { var valid = false; for (ri = 0; ri < frmobj.length; ri++) { if (frmobj[ri].checked) { valid = true; break; } } return valid; } 5 Now it is... the current system date and time WARNING! JavaScript months are treated like a zero-based array, and start at 0 When using Date objects, you must remember that the month values run from 0 – 11, where January is 0 and December is 11 Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 6-8 For product evaluation only– not for distribution or commercial use .JavaScript 1 .5 Copyright © 2003 by Application Developers . the query string will look like this: ?_fname =11 1&_lname =11 2&city =11 3&state =11 4&_age =10 20&_favsite= Yahoo&_comments =11 5& amp;submit=Submit+Form var qs = window.document.location.search;. use. Lab 5 Overview JavaScript 1. 5 5- 35 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 5 Overview In this lab. step-by- step instructions. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 5: Form Interaction 5- 36 JavaScript 1. 5