1. IS2802 Introduction to Multimedia Applications for Business Lecture 5: JavaScript, form validation and browser detection Rob Gleasure R.Gleasure@ucc.ie www.robgleasure.com

2. Lecture Outline The Navigator object A refresher on HTML forms Form validation using JavaScript Exercise

3. The Navigator object The Navigator object contains all information about the browser being used to view a page, e.g. the browser name, version, whether they have cookies enabled, etc The most commonly used are probably:  navigator.appCodeName // returns the name of the browser  navigator.appVersion // return the version of the browser  navigator.cookieEnabled // returns whether cookies are enabled A complete reference can be found at http://www.w3schools.com/jsref/obj_navigator.asp

4. The Navigator object Copy the following code into a new file and save it as browserDetails.html txt = " Browser CodeName: " + navigator.appCodeName + " "; txt+= " Browser Name: " + navigator.appName + " "; txt+= " Browser Version: " + navigator.appVersion + " "; txt+= " Cookies Enabled: " + navigator.cookieEnabled + " "; txt+= " Platform: " + navigator.platform + " "; txt+= " User-agent header: " + navigator.userAgent + " "; document.getElementById("details").innerHTML=txt;

5. HTML Forms Forms are a vital tool to allow users to input data Forms can take a chunk of user input and bind it so it can be sent for processing on a server, e.g. to save it to a file/files, email it to a specified account, gather and return relevant information for the user, etc Any form contains a number of form elements

6. Text Fields Small rectangular fields that allow a user to input text, submitting it to the appropriate web server Commonly seen in search boxes

7. Text Fields Three attributes of interest <input type="text" size=“10" maxlength="5" value=“some text to overwrite" /> States width of text-field States maximum characters allowed Gives default text to appear in the text-field

8. Checkboxes Checkboxes are useful for obtaining yes/no decisions from users

9. Checkboxes There are two attributes of interest Pay way more than you should for luggage? <input type="checkbox" checked=“yes" name=“options" /> Gives default answer “yes” Provides an ID by which the field can be referred

10. Radio Buttons Radio buttons allow a to choose only one of a selection of options

11. Radio Buttons There are two attributes of interest Do you have any allergies? Nuts: Cheese: Cat hair: States the value that will be submitted if checked Provides an ID which tells which group of radio buttons the field belongs to

12. Text Areas Text-areas allow the input of large chunks of text from the user Often used in blogs, etc, or as a prompt for unusual requests Specific tag used for each individual text-area

13. Text Areas Five attributes are of interest <textarea cols="20" rows="5" wrap="hard“ disabled = “no” readonly = “no”> Default text goes in here… States width of the text-area Ensures that the text is ‘wrapped’ within the boundaries of the text-area. Can be “hard”, “soft” or “off”. States height of the text-area States that text cannot be modified within the text-area States that text within the text-area is ‘greyed out’

14. Selection Forms and Drop-Down Lists Selection Forms are usually used when >1 option may be selected, whilst Drop-Down Lists are common when only one choice is possible Syntax is similar to ordinary HTML lists, with each list item enclosed within tags within the greater list tag text here other text here

15. Selection Forms and Drop-Down Lists There are three attributes of interest Cork Kerry Waterford States whether >1 option can be selected (doesn’t work with drop- down lists) States how many options are displayed (1 or less results in a drop down box, >1 results in a selection form) States whether any option is selected by default

16. Submit Buttons When the user clicks on the "Submit" button, the content of the form is sent to the server A submit button must be inside a element to do anything at all This specifies the text to appear on the button

17. Password Entry Password buttons are identical to regular text-fields, except the text you are typing is replaced with stars, dots, etc, in the browser window (so your password can’t be read over your shoulder). attribute ‘type’ must = “password” This does not mean your password is encrypted, or changed at all – it just ensures it is not visible to physical onlookers

18. Reset Buttons Reset buttons are simply buttons which restore the input fields on your form to their default setting attribute ‘type’ must = “reset”

19. Form Actions and Methods There are two important attributes of the element. Both of these are concerned with how the form passes information back to the script that will process the input.  The Action attribute  specifies the location of the CGI script which handles the input from the user  The Method attribute  either = “GET” or “POST” (“GET” is the default) These differ in how they encode data

20. Form Actions and Methods The main difference between “GET” and “POST” is how the data is encoded  The GET method appends the values from the form onto the end of the URL  The POST method stores all the “posted” values from a form into an associative array called “$_POST”  the different values can then be referenced using their names as an index We’ll come back to this when we’re covering PHP

21. Form Validation with JavaScript We can use JavaScript to catch a certain amount of bad input from users. These checks include:  If text input is empty  If text input is all numbers  If text input is all letters  If text input is alphanumeric  If text input has the correct number of characters  If a selection has been made from a drop down selector  If an email address is valid

22. Regular expressions We perform many of these validation checks on the basis of regular expressions  A regular expression is an object that describes a pattern of characters.  Regular expressions are used to perform pattern-matching and "search-and-replace" functions on text. You don’t often need to know how they work, as you can just search for appropriate instances.

23. Ensuring Forms are Not Blank function leftBlank(formElement, warning){ if(formElement.value.length == 0){ alert(warning); } <input type='button' onclick="leftBlank(document.getElementById('customer name'), 'Enter name')" value='Check Field' />

24. Ensuring a Selection is Made function isSelection(elem, message){ if(elem.value == "Select a gender"){ alert(message); } Select a gender Male Female <input type='button' onclick="isSelection(document.getElementById('selection'), 'Choose Male or Female')" value='Check Field' />

25. Restricting the Length of Input function ensureLength(elem, min, max, message){ var userName = elem.value; if(userName.length max){ alert(message); } <input type='button' onclick="ensureLength(document.getElementById('user name'), 4, 8, 'User name must be between 4 and 8 characters')" value='Enter a user name' />

26. Ensuring Input is Alphabetic function isNumeric(elem, message){ var alphabeticExpression = /^[a-zA-Z]+$/; /* This is a a regular expression /^[0-9]+$/ that will only match if the string is all letters and is at least one character long */ if(!elem.value.match(alphabeticExpression )){ alert(message); } <input type='button' onclick="isNumeric(document.getElementById('country'), 'Not a country')" value='Enter the country of the shipping address' />

27. Ensuring Input is Numeric function isNumeric(elem, message){ var numericExpression = /^[0-9]+$/; /* This is a a regular expression /^[0-9]+$/ that will only match if the string is all numbers and is at least one character long */ if(!elem.value.match(numericExpression)){ alert(message); } <input type='button' onclick="isNumeric(document.getElementById('credit card'), 'Not valid card')" value='Enter credit card number' />

28. Ensuring Input is Alphanumeric function isAlphaNumeric(elem, message){ var alphaNumericExpression = /[0-9a-zA-Z]/; /* This is a regular expression /[0-9a-zA-Z]/ that will only match if the string contains either letters or numbers, and is at least one character long */ if(!elem.value.match(alphaNumericExpression )){ alert(message); } <input type='button' onclick="isAlphaNumeric(document.getElementById('street'), 'Include the street name and number')" value='Enter the street of the shipping address' />

29. Validating an Email Address function emailValidator(elem, Message){ var emailExpression = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; /* This expression checks to ensure the input follows the syntax of validcharacters@something.thing*/ if(!elem.value.match(emailExpression)){ alert(Message); } <input type='button' onclick="emailValidator(document.getElementById('emailer'), 'Not a Valid Email Address')" value='Enter email address' />

30. Exercise Save the following text in a new file called lecture5.html function formSubmit() { document.getElementById("myForm").submit();} Enter your details and press the "Submit form" button to submit the form. First name: Last name: Home address: Email address:

31. Exercise Validate the page, such that  The name and first name must be alphabetic  The address must be alphanumeric  The email address must be valid

32. References and Further Reading http://www.w3schools.com/html/html_forms.asp http://www.javascriptkit.com/javatutors/re.shtml http://www.w3schools.com/js/js_form_validation.asp