Dynamic Web Authoring form validation (1) COM311H Zheng, School of C&M, UUJ1
Teaching Plan Feedback on Week8 practical8 Revision -- Multi-looping Form validation statements Week 9 practicals Class test next week – in lab, via blackboard, 45 mins. COM311 H Zheng, School of C&M, UUJ 2
Feedback (1) - average JavaScript Operators have a predefined order of precedence multiplication and division Operator have higher precedence over addition and subtraction Operator Using parentheses to control any JavaScript expressions in an order of our choice example: window.alert(4 + 3 * 2); window. alert((4 + 3) * 2); window. alert((4 / 2) * 2); compare these two statements: 1. var avgGrade=grade1+grade2+grade3+grade4/4; 2. var avgGrade=(grade1+grade2+grade3+grade4)/4; 21/11/2016 H Zheng, School of C&M, UUJ 3
Feedback (2) string and number document.write (“The visitor is ” + name); 21/11/2016 H Zheng, School of C&M, UUJ 4 string, must be in quotes variable
Feedback (3) convert string into number: 1. var numVarible = +textVarible; 2. var numVarible = textVarible - 0; 3. var numVarible = textVarible * 1; 4. var numVarible = textVarible / 1; 5. var numVarible = Number(textVarible); 6. var numVarible = parseFloat(textVarible,10); 7. var numVarible = parseInt(textVarible,10); 21/11/2016 H Zheng, School of C&M, UUJ 5 -to hexadecimal - base 16 -to decimal - base 10
Feedback (4) – average2 Javascript <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!-- function average() { var grade1=parseInt(document.myform.grade1.value); var grade2=parseInt(document.myform.grade2.value); var grade3=parseInt(document.myform.grade3.value); var grade4=parseInt(document.myform.grade4.value); var average=(grade1+grade2+grade3+grade4)/4; document.write("The average of your marks is: "+average); } --> 21/11/2016 H Zheng, School of C&M, UUJ 6 Curly brackets must be in pairs!
Feedback (5) – conditional branch if ((average >=90) && (average <=100)) { document.write("You got an A!"); } 21/11/2016 H Zheng, School of C&M, UUJ 7 use ‘&&’ not ‘&’ for AND use a complete statement brackets should be in pairs
How to check drop-down menu Example: function favBrowser() { var mylist=document.getElementById("myList"); document.getElementById("favorite").value=mylist.options[mylist.s electedIndex].text; } //to be continued COM311 H Zheng, School of C&M, UUJ 8
Drop-down menu (continued) Select your favorite browser: Google Chrome Firefox Internet Explorer Safari Opera Your favorite browser is: COM311 H Zheng, School of C&M, UUJ 9
Nested for loop Using nested for loop to create a two dimensional table 21/11/2016 H Zheng, School of C&M, UUJ 10
Nested for loop 21/11/2016 H Zheng, School of C&M, UUJ 11 for (j=1; j<=10; j++) { // start a row for (i=1; i<=10; i++) { (write information of this row) } // end the row }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " multiplication table <!--//hides script // ends script hiding --> for (j=1; j<=10; j++) { document.write(' '); for (i=1; i<=10; i++) { document.write(' ',i*j,' '); } document.write(" \n");// end the line } COM311 H Zheng, School of C&M, UUJ 12
Dynamic Web Authoring Form validation (1) 21/11/2016H Zheng, School of C&M, UUJ13
21/11/2016 H Zheng, School of C&M, UUJ 14 Objectives To learn how to use form validation to examine the text entered by your visitors To understand the principles of working with text fields To learn how to detect and change the format of information in a text field To learn how to work with radio buttons, check boxes, and selection menus To create simple self-grading tests
21/11/2016 H Zheng, School of C&M, UUJ 15 Form Validation Form validation types: Check the data the visitor enters on the form has the user entered a valid address? has the user entered a valid date? has the user entered text in a numeric field? has the user left required fields empty? Remind the visitor to enter missing data Reformat the visitor’s data as needed
Form Elements Properties size/length – text, text area Check the text input, if no input: - Input text value is empty or null - Input text length is 0 checked – radio button, check box For example: if (document.myform.uni[i].checked) { ….. } if (!document.myform.uni[i].checked) { ….. } 21/11/2016 H Zheng, School of C&M, UUJ 16 H Zheng, School of C&M, UUJ 16
Text field input validation check if there is an input or not: if (!document.survey.visitor.value){ } “!” – NOT, return true if the operand is false “if the value of visitor is not filled in…” “!=” Does not equal var x = document.survey.visitor.value; if (x==null || x==""){ } //if x is empty, “null”- 21/11/2016 H Zheng, School of C&M, UUJ 17
21/11/2016 H Zheng, School of C&M, UUJ 18 Text field input validation - example Listing3.1 focus( ) method: to give focus to an element. syntax: HTMLElementObject.focus() e.g. document.myform.age.focus(); document.getElementById('age').focus();
Listing 3.1 Basic Form Validation <!-- function validate(){ if (!document.survey.visitor.value){ alert("You must enter your name before submitting this form."); document.survey.visitor.focus(); return false; }else{ return true; } //--> Visitor Color Preference Survey Name (required): Favorite Color: What are your thoughts on using this survey? COM311 H Zheng, School of C&M, UUJ 19
21/11/2016 H Zheng, School of C&M, UUJ 20 Other information validation Required input Reasonable information Correct format Other information
Reasonable information checking input value range, for example, 0-30, input number or letter? check each character is between "0" and "9", or each number is between 0-9. if ((theChar>="0")&&(theChar<="9")){….} if ((theDigit>=0) && (theDigit<=9)){…} how to check character between a-z or A-Z? if ((theChar >= ”a" && theChar = ”A"&& theChar <= ”Z")) 21/11/2016 H Zheng, School of C&M, UUJ 21
21/11/2016 H Zheng, School of C&M, UUJ 22 String properties and methods String is an array eg: var myname = "Jane Zheng"; var Ch1=myname[0];//Ch1="J" var Ch2=myname[4];//Ch2=” " length – number of characters in the String e.g. var mynamelen = myname.length; => mynamelen = 10 Question: how to check an input contains number or letter?
21/11/2016 H Zheng, School of C&M, UUJ 23 Check the input string: 1. Get the input string var theInput=document.myform.mygrade.value; 2. Pick up the numbers only for (i = 0; i < theInput.length; i++){ theChar = theInput[i]; if ((theChar >= "0") && (theChar <= "9")){ // this input character is a digit; }
21/11/2016 H Zheng, School of C&M, UUJ 24 Summary- Validating Text Fields Determine: whether a value has been entered. For example, !document.survey.visitor.value Whether the reasonable information has been entered – check the input string
Summary feedback & response Nested loops Form validation Practical Class test COM311 H Zheng, School of C&M, UUJ 25