Faculty of Sciences and Social Sciences HOPE JavaScript Validation Regular Expression Stewart Blakeway FML

Faculty of Sciences and Social Sciences HOPE Objectives More Validation – required fields – passwords – complex passwords – addresses Regular Expression

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

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

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

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; }

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

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

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

Faculty of Sciences and Social Sciences HOPE JavaScript Syntax define the conditions of the check var re = / the conditions /;

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);

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

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"); }

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"); }

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"); }

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

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

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

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

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

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

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

Faculty of Sciences and Social Sciences HOPE Exact Number of Characters {n} re = /^[0-9]{11}$/

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

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

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

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

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

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

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)

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}$/

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}$/

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}$/

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

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

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

Faculty of Sciences and Social Sciences HOPE Only Symbol Only symbol should appear in a valid address = document.getElementById(“ ”).value; atPosition = if > -1) { alert(“Please enter a valid address”); return false; }

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

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

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

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address Don’t be put off by the syntax Regular Expression once understood offers greater flexibility with string handling

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address Signifies the START and END of the Expression

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address This is a caret. In a regular expression it means start at the beginning of the string that is being inspected

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address Any one character (A-Z, a-z or 0-9 or an underscore. An address must start with one of these characters!

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address There is one or more of the previous. In this case, A-Z, a-z, 0- 9 or an underscore

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address The Start and Finish parenthesis signifies a group

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address 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.

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address The question mark signifies zero or one of the previous item. NOT MORE

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address Test your knowledge so far. Which are valid according to the above selected part of the expression? 1. abc.abc2. a.a3. 3. abcabc4. -abc5. abc-abc 4. a.a

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address The * means zero or more of the previous. (in this case the group) This allows for: abc-abc-abc

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address symbol must appear after the previous condition(s)

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address There must be a period

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address 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.

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address One or more of the previous MUST exist.

Faculty of Sciences and Social Sciences HOPE Regular Expression to Check a Valid Address Finally! The string must end after the previous.

Faculty of Sciences and Social Sciences HOPE Using a Regular Expression re = = document.getElementById(“ ”).value; if (re.test( )) { return true; } else { alert(“Please enter a valid address”); return false; } No Quotes

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

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

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?

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.

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.

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. – ', ?, +, : are not allowed

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