g053 - lecture 16 validating forms mr c johnston ict teacher
TRANSCRIPT
G053 - Lecture 16
Validating Forms
Mr C JohnstonICT Teacher
www.computechedu.co.uk
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.
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.
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.
<html><head><title>An Example Form</title></head><body><form>enter name* <input type=text name=“name"><p>enter comment* <input type=text name=“comment"><p><input type=submit value="Process"></form><p>Fields marked with * must be entered.</body></html>
Adding Validation - Setup Before you can add any validation you need to ensure
each of your fields on your form has a name:<input type=“xxx” name=“yyyy”>
Next you need to add a script section within the head part of your HTML document – this is where the code will go,<html><head><title> xxxx </title> <script language=“Javascript”>‘insert code here</script></head>
If using a Dreamweaver template look for the <!-- InstanceBeginEditable name="head" --> and add the code under here
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,
<script language=“JAVASCRIPT”>function validForm(myForm) {}</script>
This is the name given to the form field in the name=“xxxx” property
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:
<form onSubmit="return validForm(this)“>
The next slide shows the full code for the example you saw earlier and evidence that it works.
<head><title>An Example Form</title><script language="JAVASCRIPT">
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}
</script></head><body><form onSubmit="return validForm(this)" >enter name* <input type=text name="name"><p>enter comment* <input type=text name="comment"><p><input type=submit value="Process"></form><p>Fields marked with * must be entered.</body></html>
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
}
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
}
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
}
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 appearsIf( (!myForm.binService[0].checked) && (!
myForm.binService[1].checked) && (!myForm.binService[2].checked) ) {
alert(“You must select one of the bin service ratings"return false
}
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<1 || dotpos<atpos+2 || dotpos+2>=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.
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;}
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.
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