As we have discussed, it’s good for a GUI program to anticipate and compensate for user errors, but it’s even better if the program is designed to catch errors as soon as the user makes them and guide the user toward correcting them. Remember the three pillars of good error messages:
In our previous assignment, you were to do this using either “straight” JavaScript or jQuery by processing events such as blur, focus, and submit. For this assignment you are required to do the validation using the jQuery Validation plugin, which is covered in Chapter 9 of JavaScript & jQuery: The Missing Manual. This plugin will allow you to do more powerful validation and make your application more responsive to users. (As you know, jQuery is a JavaScript library built entirely in JavaScript, so it is *possible* to do everything that the jQuery Validation plugin does using “straight” JavaScript, but it is much, much more work.)
Begin by copying your program for the previous assignment — or at least your main HTML page — to a new file so that you can modify it without destroying your previous work.
Modify your page to validate all data entered by the user using the jQuery Validation plugin and prevent the form from being submitted (or the table from being regenerated) if the user’s entry contains an error. If there is no error, regenerate the table as in the previous assignment.
Explore the various jQuery Validation plugin options carefully. Read the text, study my examples, and search for additional examples online. Customize the error messages displayed by the plugin so that they make sense in the context of your application. Customize where the error messages are placed to maintain complete control over how your page looks.
Test your page thoroughly. Try to anticipate all the errors that a user might make, whether intentional or unintentional. Make sure that you handle each possibility.
Have a friend run your application and try to “break” it. Plug any “holes” that your friend finds in your application and/or its validation scheme.
Note: The nine sample programs shown and discussed in class can be found starting at
https://teaching.cs.uml.edu/~heines/91.461/91.461-2012-13f/461-lecs/code/jmh-table-v1.html
As always, submit your assignment using the Assignment Submission Form. This form will lead you through providing all the information we need to evaluate your work, confirming that it is correct, and then e-mailing that information to our teaching assistant and me with a copy to yourself. Be sure to select 91.461 Assignment No. 7: Using the jQuery Validation Plugin with Your Dynamic Table from the assignment drop-down list on that form.
Important Note: If you do not receive an e-mail in your CS account within a few minutes confirming that your assignment has been submitted, something has gone wrong. Try submitting again or contact me.
This assignment will be graded on a 20-point system with points awarded as follows. Please note that the lists of features provided below are not meant to be exhaustive. They are merely representative of the types of things we are looking for in each grading category. As always, 20% of your grade is for documentation.
| Criteria (numbers in parentheses are the points that can be earned for that bullet item) | Possible Points |
Program Integrity / Design
|
16 |
Source Code Documentation and Formatting
|
4 |