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

Create a new pair of <script> tags at the place indicated for task 1 in the source code

Inside these tags create a new function, the name of which is up to you. Inside the function add the following code:

alert('function is working');

Next, underneath the <script> block, code a HTML input tag, such as:

<input type="button" value="Test Code" ... />

This tag should include an onClick() event handler which calls the function you have created. The functions page contains examples of this in use.

Test your code by previewing this page in a browser. When clicked, the "Test Code" button should spawn an alert box which states "function is working".

Task 2

Create five JavaScript String variables inside the function block and above the alert line. Name each variable after an element in the HTML form below. For example:

var formNameValue = // ...;
var formAgeValue = // ...;
var formNationality = // ...;

Using what you have learnt about extracting data from forms assign each the value from the corresponding HTML form control.

Replace the 'function is working' section of the alert line alert line with the first variable. This line should look something like this:

alert(formNameValue);

Preview your page in a web browser. Enter data into the form field you are testing (in the example above it would be the "name" field) and click the "Test Code" button. You should see the text you have entered into the form field appear in the alert window that is created. Repeat this for each of the five HTML form fields changing the variable in the alert line each time you test a new field. This will make sure the data is being extracted from the form as expected.

You may need to move your JavaScript block to towards the bottom of the HTML, to one of the commented placed in this code to get it working properly.

The form

Name:

Gender: Male Female

Age:

Nationality:

Email:

Your question

Task 3

Use if blocks (one for each variable) to determine if the data entered is or is not valid. Add an alert() to each block to inform the user if any of the data entered in the HTML form is not valid.

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

After creating each validation rule, preview your page in a web browser, enter data into the form to test both the true and false clauses of the if block testing each with the "Test Code" button.

Task 4

Remove the "Test Code" button tag:

<input type="button" value="Test Code" ... />

Using the <form> below code an onsubmit() event handler inside the <form> tag. This should link to the validation function you have created. Do not forget to prevent the form submitting should ANY of the data entered in the form prove to be invalid. You can find out how to do this by reading the onSubmit() section of the event handlers page where there is a working example.

Extension

1. 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.

2. 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).

3. 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}$/;