1. TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT Session 3

2. Objectives  Why using JavaScript for Form Validation  How to check for non-empty fields  How to check for all numbers  How to check for all letters  How to check for numbers and letters  How to restrict the length  How to check a selection has been made  How to validate e-mail

3. Why Using JavaScript for Form Validation?  Avoid the headaches of incomplete form submitted data.  Idea: Using JavaScript form validation  to provide a method to check the user entered information before they can even submit it.  To display useful alerts to inform the user what information they have entered incorrectly. how they can fix it.

4. How to check for non-empty fields Step 1: JavaScript Code (fill the blank) // If the length of the element's string is 0 then display helper message function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); //set the focus to this input return false; } return true; } Step 2: Add onclick attribute to the field

5. Practice: check for non-empty fields  In-Class Example

6. How to Check for All Numbers Step 1: JavaScript Code // If the element's string matches the regular expression it is all numbers function isNumeric(elem, helperMsg){ var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)){ return true; }else{ alert(helperMsg); elem.focus(); return false; }

7. How to Check for All Numbers  Step 2: Add onclick attribute to the field

8. Practice: check for all numbers  In-Class Example

9. How to Check for All Letters  Step 1: JavaScript Code // If the element's string matches the regular expression it is all letters function isAlphabet(elem, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; } else{ alert(helperMsg); elem.focus(); return false; }  Step 2: Add onclick attribute to the field

10. Practice: Check for all Letters  In-Class Example

11. How to Check for Numbers and Letters  Step 1: JavaScript Code // If the element's string matches the regular expression it is numbers and letters function isAlphanumeric(elem, helperMsg){ var alphaExp = /^[a-zA-Z0-9\s-]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; }  Step 2: Add onclick attribute to the field

12. Practice: Check for Numbers and Letters  In-Class Example

13. How to Restrict the Length  Step 1: JavaScript Code function lengthRestriction(elem, min, max){ var uInput = elem.value; if(uInput.length >= min && uInput.length <= max){ return true; }else{ alert("Please enter between " +min+ " and " +max+ " characters"); elem.focus(); return false;} }  Step 2: Add onclick attribute to the field

14. Practice: Restrict the Length  In-Class Example

15. How to Check a Selection has been Made  Step 1: JavaScript Code function madeSelection(elem, helperMsg){ if(elem.value == "Please Choose"){ alert(helperMsg); elem.focus(); return false; }else{ return true; }  Step 2: Add onclick attribute to the field

16. Practice: Check Selection Made  In-Class Example

17. How to Validate E-mail  Step 1: JavaScript Code function emailValidator(elem, helperMsg){ var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0- 9]{2,4}$/; if(elem.value.match(emailExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; }}  Step 2: Add onclick attribute to the field

18. Practice: Validate E-mail  In-Class Example

19. Validating a Form all at Once: Bringing All Together  JavaScript Code:  Each required fields should be filled (or non-empty).  Form Code:  Each form has a JavaScript event called onSubmit that is triggered when its submit button is clicked.  If this event returns 0 or false then a form cannot be submitted  if the event returns 1 or true it will always be submitted.

20. Practice: Complete Validation a Form  In Class Example