Download this page and open with Dreamweaver. Or right click and select "View Source", then cut and paste the code to Dreamweaver.
This task is the culmination of the JavaScript and jQuery exercises you have undertaken thus far.
You are to:
Add an onSubmit() event handler to the form to check through the data that has been submitted according to the following validation rules. You will need to use the regular expressions used on the forms exercise page to help you with this. You MUST use jQuery's method of extracting values from form controls.
Form element | Rule description |
---|---|
Name | Must contain more than 4 characters and only a-z, hypen, apostrophe or space |
Gender | If "female" is selected change the form background to pink (#CC99CC), if not or if changed to male revert background to normal |
Age | Must be 3 characters or less and all numbers |
Nationality | Must be 5 characters or more and only a-z, hypen, apostrophe or space |
Must contain an @ symbol, at least 2 characters before the @ symbol and at least one period character (.) after it | |
Telephone | Must be at least nine characters and contain an only numbers with possibly one space character after the STD code |
Question | Must not contain a semi-colon (;) |
Rather than generate an alert() box for any control not meeting its validation criteria, use jQuery's html() method to add warnings messages in below the offending form element. A series of <div> tags with appropriate ID attributes have been included in the source code for you to use.
Use jQuery transitions to animate the warning messages showing and hiding.