1. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway blakews@hope.ac.uk FML 213 0151 291 3113

2. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Objectives More Validation – required fields – passwords – complex passwords – email addresses Regular Expression

3. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Checking for null values! Structured English variable := form element if (variable = “”) begin display (“You must enter an email address”) set cursor to missing form element cancel sending of data end

4. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Checking for null values! JavaScript email = getElementById(“email”).value; if (email == “”) { alert(“You must enter an email address”); document.form1.email.focus(); return false; }

5. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Checking Confirmation Passwords Structured English variable := form element 1 variable2 := form element 2 if (variable not= variable2) begin message box (“You password does not match!”) clear form element 1 clear form element 2 set cursor to element 1 cancel sending of data end

6. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Checking Confirmation Passwords JavaScript var password1 = document.getElementById("password1").value; var password2 = document.getElementById("password2").value; if (password1 != password2) { alert("Passwords don't match!"); document.form1.password1.value = ""; document.form1.password2.value = ""; document.form1.password1.focus(); return false; }

7. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression Used for validating strings of text Extremely Powerful and simple to code once you understand the syntax Saves you a huge amount of time

8. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Usage get the string you want to check define the conditions of the check check the string – this will return the result true or false perform an action depending on result

9. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Syntax get the string you want to check var toCheck = document.getElementById(“telnum”).value;

10. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Syntax define the conditions of the check var re = / the conditions /;

11. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Syntax check the string re.test(toCheck); remember it returns true or false – we have to remember this! var result = re.test(toCheck);

12. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Syntax perform an action depending on result if (result) { alert ("correct"); } else { alert ("incorrect"); }

13. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Syntax The last two steps are usually combined. More efficient coding, more complicated to understand if (re.test(toCheck)) { alert ("correct"); } else { alert ("incorrect"); }

14. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE JavaScript Syntax You could go one step further if (re.test(document.getElementById(“telnum”).value)) { alert ("correct"); } else { alert ("incorrect"); }

15. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE For Now – Keep it simple! var toCheck = document.getElementById(“telnum”).value; var re = / the conditions /; var result = re.test(toCheck); if (result) { alert ("correct"); } else { alert ("incorrect"); }

16. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE The Conditions You want to allow numbers only! re = /^[0-9]+$/

17. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE The Conditions You want to allow numbers only! re = /^[0-9]+$/ Start and End of Regular Expression

18. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE The Conditions You want to allow numbers only! re = /^[0-9)+$/ Check from the beginning of the string

19. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE The Conditions You want to allow numbers only! re = /^[0-9]+$/ Until the end of the string

20. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE The Conditions You want to allow numbers only! re = /^[0-9]+$/ Start and Finish of a range

21. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE The Conditions You want to allow numbers only! re = /^[0-9]+$/ The range

22. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE The Conditions You want to allow numbers only! re = /^[0-9]+$/ At least one or more of the previous ? Zero or 1 and no more *Zero or more

23. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Exact Number of Characters {n} re = /^[0-9]{11}$/

24. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE At least Number of Characters {n,} re = /^[0-9]{5,}$/

25. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Between Number of Characters {n,m} re = /^[0-9]{5,15}$/

26. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Looking for specific words re = /cat/ Why have we removed the ^ and the $ ? matches my cat is green

27. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Looking for specific words re = /^cat/ does not match my cat is green does match cat is green

28. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Looking for specific words re = /cat$/ does not match cat is green does match green is my cat

29. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Examples of use You may want to check specific words But more likely you will want to check for group patterns

30. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Car Registrations Car registrations have adopted several patterns used in mainland UK a year letter, 1 to 3 digits, and 3 letters, e.g. J21 YTB (I, O, U and Z were not used)

31. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Breaking it down A year letter. re = /^[A-Z]{1}$/ (I, O, U and Z were not used) re = /^[A-H,J-N,P-T,VWXY]{1}$/

32. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE 1 – 3 digits [0-9]{1,3} re = /^[A-H,J-N,P-T,VWXY]{1}[0-9]{1,3}$/

33. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE and 3 letters (I, O, U and Z were not used) [A-H,J-N,P-T,VWXY]{3} re = /^[A-H,J-N,P-T,VWXY]{1}[0-9]{1,3} [A-H,J-N,P-T,VWXY]{3}$/

34. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Checking an Email Address 1.invalid character(s) ? 2.null value ? (saw this in slide 3 + 4) 3.position of the @ symbol 4.only one @ symbol 5.the final. comes after the @ symbol 6.at least 2 characters after the final.

35. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Invalid Characters Email address are not allowed to contain – / :, ; email = document.getElementById(“email”).value; invalidChar = “ /:,;”; for (i = 0 ; i <= 4 ; i++) { currentChar = invalidChar.charAt(i); if (email.indexOf(currentChar) != -1) { alert(“You must enter a valid email address”); document.form1.email.focus(); return false; }

36. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Position of the @ Symbol An @ symbol is not allowed to be the first character in an email address but must exist email = document.getElementById(“email”).value; atPosition = email.indexOf(“@”); if (atPosition <= 0) { alert(“Please enter a valid email address”); return false; }

37. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Only one @ Symbol Only one @ symbol should appear in a valid email address email = document.getElementById(“email”).value; atPosition = email.indexOf(“@”); if (email.indexOf(“@”,atPosition+1) > -1) { alert(“Please enter a valid email address”); return false; }

38. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Final. comes after the @ symbol The period must come after the @ symbol email = document.getElementById(“email”).value; atPosition = email.indexOf(“@”); dotPosition = email.lastindexOf(“.”); if (atPosition > dotPosition) { alert(“Please enter a valid email address”); return false; }

39. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE There should be at least 2 characters after the final period email = document.getElementById(“email”).value; dotPosition = email.lastindexOf(“.”); if (dotPosition+3 > email.length) { alert(“Please enter a valid email address”); return false; }

40. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Phew! That is a lot of checks on a string of text There is a shorter way of checking a string – REGULAR EXPRESSIONS

41. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ Don’t be put off by the syntax Regular Expression once understood offers greater flexibility with string handling

42. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ Signifies the START and END of the Expression

43. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ This is a caret. In a regular expression it means start at the beginning of the string that is being inspected

44. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ Any one character (A-Z, a-z or 0-9 or an underscore. An email address must start with one of these characters!

45. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ There is one or more of the previous. In this case, A-Z, a-z, 0- 9 or an underscore

46. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ The Start and Finish parenthesis signifies a group

47. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ The brackets signifies allowed characters. In this example the allowed character is a period or a hyphen. Note:. Matches any single character except line break characters.

48. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ The question mark signifies zero or one of the previous item. NOT MORE

49. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ Test your knowledge so far. Which are valid according to the above selected part of the expression? 1. abc.abc2. a.a3. abc@abc 3. abcabc4. -abc5. abc-abc 4. a.a

50. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ The * means zero or more of the previous. (in this case the group) This allows for: abc-abc-abc

51. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ An @ symbol must appear after the previous condition(s)

52. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ There must be a period

53. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ We know the w signifies A-Z, a-z or 0-9 or an underscore. The { } allows you to enter the number of characters expected. In this case, allow 2 or 3 characters.

54. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ One or more of the previous MUST exist.

55. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Email Address /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ Finally! The string must end after the previous.

56. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Using a Regular Expression re = /^\w+([\.]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; email = document.getElementById(“email”).value; if (re.test(email)) { return true; } else { alert(“Please enter a valid email address”); return false; } No Quotes

57. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE In Pairs Create a regular expression that matches the following criteria for a post code in the UK. – must start with an alpha character – can be either one or two characters – must follow by a number – can be either two or three numbers – must follow by two alpha characters WV10 8DD L13 6SH L8 3SF SA99 1YW

58. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE My Answer! ^[A-Za-z]{1,2}\d{2,3} [A-Za-z]{2}$ 1.Start at the beginning of the string 2.Must start with an alpha character 3.Can be One or Two but no more or less 4.Must follow by a number 5.Can be Two or Three but no more or less 6.Must follow by and alpha character 7.Must be two 8.End of string WV10 8DD L13 6SH L8 3SF SA99 1YW

59. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE In Pairs Examine the following expression, write a list of rules for the expression (^[A-Z]{2}[0-9]{6}[A-DFM]{1}$) What might you validate using this expression?

60. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE UK National Insurance Number validation Starts with two letters, followed by 6 numbers, ends with a single letter. The first letter may not be D, F, I, Q, U or Z; The second letter may not be D, F, I, O, Q, U or Z; The final letter is optional.

61. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Credit Cards All MasterCard numbers start with the numbers 51 through 55. All have 16 digits. All Visa card numbers start with a 4. New cards have 16 digits. Old cards have 13.

62. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Complex Passwords Regular Expressions can be used to check that the user has entered a complex password – At least one upper case letter. (A - Z) – At least one lower case letter. (a - z) – At least one number. (0 - 9) – Special Characters: ~ ! $ % ^ & * () _ =,. / ; [] " <> {} \ | - are allowed. – Spaces, @, ', ?, +, : are not allowed https://webapps.ou.edu/pass/includes/passwordRules.cfm

63. www.hope.ac.uk Faculty of Sciences and Social Sciences HOPE Any Questions ? In your seminars I will be talking to you individually and as a team to ascertain what you have been doing. I expect to see – Storyboards – Navigation Diagrams – Website Brief – Minutes of Last Meeting – List of assigned roles for individuals – List of team rules – Individuals Action Points with Times – Individuals Plan of Action to address Action Points