jQuery selectors and stylesheets 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

This task is the culmination of the JavaScript and jQuery exercises you have undertaken thus far.

You are to:

  1. 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
    Email 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 (;)
  2. 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.

  3. Use jQuery transitions to animate the warning messages showing and hiding.

Male Female