JavaScript accessing forms exercise

Download this page and open with Dreamweaver. Or right click and select "View Source", then cut and paste the code to Dreamweaver.

Task 1

Using the form below code an onsubmit() (scroll down for an example of this in use) event handler inside the <form> tag. This should link to a named function which you will create in the space indicated in the code of this page.

Add <script> tags and code your named function. Using what you have learnt in the forms section, extract the values from each of the form elements and check them for validity.

Here are the validation rules you are to apply:

Form element	Rule description	Links to relevant JavaScript
Name	Must contain more than 4 characters	string.length;
Gender	No validation required	N/A
Age	Must be 3 characters or less and all numbers	string.length;
Nationality	Must be 5 characters or more	string.length;
Email	Must contain an @ symbol	string.lastIndexOf();
Question	Must not contain a semi-colon (;)	string.lastIndexOf();

Use if blocks to determine if the data entered is or is not valid. Use an alert() to inform the user if any of the data does not prove to be valid.

Do not forget to prevent the form submitting if the data entered into the form is invalid. You can find out how to do this by reading the onSubmit() section of the event handlers page.

Extension

Rather than using alert() to warn the user, use what you have learnt about getElementById and innerHTML to include the warning message under (or over) the offending control should it contain invalid data.

Add a <style> block to the head of the page and code appropriate CSS classes to make these warnings stand out.
Add a telephone number control to the form and modify your script to check any data submitted from it for a valid phone number (the format would be 4 or 5 numbers followed by a space and then followed by 5 to 7 numbers).
Using regular expressions amend the if statements in your JavaScript to more accurately match the data submitted from the form.

You should read about the match() method before attempting this. If this method finds a match it will return the string it matches. If it does not find a match it will return null. So, the test should always be to see if the match() returns null. If it does then the data does not conform to the format you require and you should make the user aware of this.

You can use match like this:
```
// define a string containing numbers
var numb = "02767";
			
// create a regular expression pattern which will match if  
// the string contains only numbers.
var regexp = /^[0-9]+$/;

// run the match and alert the result
alert(numb.match(regexp));
```
1. Add an extra clause to Name to check that the value only contains alphabetic characters (a-z and A-Z) or space, hypen or apostrophe. The Regular Expression for this is:
```
/^[a-z\s-']+$/i
```
2. Use a Regular Expression to validate age. The expression is:
```
/^1?[0-9]{1,2}$/
```
3. Add a similar clause to Nationality to check that the value only contains alphabetic characters, spaces, hypens and apostrophes). The Regular Expression for this is:
```
/^[a-z\s-']+$/i
```
4. Add a clause to Email to check that there is at least 2 characters before the @ symbol and at least one period character (.) after it. The Regular Expression for this is:
```
/^[a-z0-9-_\.]{2,}@[a-z0-9-_\.]+\.[a-z]{2,4}$/i
```
5. Change the clause that checks the Telephone field so that it uses a Regular Expression. The Regular Expression for this is:
```
/^[0-9]{4,5}\s?[0-9]{5,7}$/;
```