1. G053 - Lecture 16 Validating Forms Mr C Johnston ICT Teacher www.computechedu.co.uk

2. Session Objectives Understand what validation is and why we use it on web forms, Looked at an example of validation on a simple web form, Inserted the necessary coding into a HTML document that contains a web form and tested it works.

3. Overview When designing web forms to collect data we often require certain data to be entered, The process of “validation” forces a user to enter something into specified fields on a form, To validate a form we add some coding into our HTML document using a programming language - often “Javascript”, By including validation routines on our websites it not only make them more professional but also contributes towards MB3 for section C.

4. An Example Form We want the user to enter data into both fields – notice a star to indicate this, currently they are not forced to and can submit the form with data missing. An Example Form enter name* enter comment* Fields marked with * must be entered.

5. Adding Validation - Setup Before you can add any validation you need to ensure each of your fields on your form has a name: Next you need to add a script section within the head part of your HTML document – this is where the code will go, xxxx ‘insert code here If using a Dreamweaver template look for the and add the code under here

6. Adding Validation - Coding Within the script section of you html document you need to declare a function, function validForm(myForm) { if(myForm.name.value == “”) { alert(“You must enter your name”) return false } return true } Next take each of your fields on the form in turn and write an IF statement to check that something has been entered, function validForm(myForm) { } This is the name given to the form field in the name=“xxxx” property

7. Adding Validation – Final Bit Finally you need to instruct the browser to run the validation code before it tries to submit the form. To do this you need to add this into the form tag: The next slide shows the full code for the example you saw earlier and evidence that it works.

8. An Example Form function validForm(myForm) { if(myForm.name.value=="") { alert("You must enter your name") myForm.name.focus() return false } if(myForm.comment.value=="") { alert("You must enter your comment about our site") myForm.comment.focus() return false } return true } enter name* enter comment* Fields marked with * must be entered.

10. Adding Code – Pull Downs The if statement we have looked at so far only allows us to check if text has been entered into a text box. Use the following if statement for checking if a sensible value from a pull down has been selected. if(myForm.selectPizza1.selectedIndex==0) { alert("Please select at least one pizza") myForm.selectPizza1.focus() return false }

11. Adding Code – Testing Passwords Some people have registration forms on their site which required a user to enter a password twice, A similar IF statement to what we have seen already can be used to check these two passwords match before submission if(myForm.password1.value != myForm.password2.value) { alert(“The two passwords entered must match ") myForm.password1.focus() return false }

12. Adding Code – Tick Box Some people have a box which needs to be ticked to accept the terms and conditions A similar IF statement to what we have seen already can be used to check that this has been done if(!myForm.accept.checked) { alert(“You must accept the terms and conditions") myForm.accept.focus() return false }

13. Adding Code – Radio Buttons Radio buttons are an array as each one in the group has the same name yet is a different instance of it e.g. binService[0], binService[1], binService[2] This if statement checks that each of the radio buttons in the group has not been ticked and if its true then the alert message appears If( (!myForm.binService[0].checked) && (!myForm.binService[1].checked) && (!myForm.binService[2].checked) ) { alert(“You must select one of the bin service ratings" return false }

14. Adding Code – Email Addresses Email addresses should have an @ sign in them – this IF statement can be used to ensure this is true var x = myForm.email.value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos =x.length) { alert("Not a valid e-mail address"); myForm.email.focus(); return false; } You could also adapt this code to check that passwords are strong.

15. Adding Code – Phone Numbers Using isNan (is Not a Number) we can check that a phone number field only has numbers in it… I have checked if there is a value present first as if its blank then isNaN is ignored and it moves onto the next statement.. if(myForm.phoneNumber.value=="") { alert("Phone numbers should only contain numbers"); myForm.phoneNumber.focus(); return false; } if(isNaN(myForm.phoneNumber.value)) { alert("Phone numbers should only contain numbers"); myForm.phoneNumber.focus(); return false; }

16. Exercise Show your form code prior to adding any validation – write on what you will be doing. Add coding onto your HTML page which contains a web form so that fields which require entry are checked before submission. Test that it works correctly and remove any bugs, Show the code now you have manually added the script.

17. Further Resources http://www.webdevelopersjournal.com/articles/jscript_forms1.html http://www.htmlcenter.com/tutorials/tutorials.cfm/74/Javascript http://javascript.about.com/library/weekly/aa070901a.htm