home—lects—exams—hws
D2L—breeze (snow day)

hw04
Client side validation, sticky forms

Due: 2012.~~Mar.30 (Fri)~~ Apr.02 (Mon) 23:59.

We will further improve on hw03—Server side validation's .W.o.W. page by adding client-side validation, and making the form a sticky form.

Make a copy of your directory from hw03, named hw04/. (cp -pR hw02/ hw03 will Recursively copy directories, preserving timestamps.) I will grade your hw in the usual way, by visiting https://php.radford.edu/~yourUserId/itec325/hw04/hw04-files.php, which should
1. before the deadline say something like “source not available until date”,
2. after the deadline have (for each file part of your hw04) its source-code, last-modified time, and a link to it.
There will only be one URL ever used by the client (not a separate form/submit as before); however, you are still encouraged to use separate files to help cleanly organize your php and javascript code. (See php's require.)
Include all the same input-validation mentioned on hw03, but do the validation client-side as well.
Note:(A hw03-soln and your hw03 grades will be ready in the next couple of days — Mar.25)
If the input field fails validation, dynamically modify the html page to insert (or remove/zero-out) an error message. (Recall lect06a-js—case study: refactoring javascript Use css to control the style of the error message.)
Make the form sticky: if the server-side validation fails ¹, the user is shown the form again, with all previously-entered information still there. Do this by having your php generate html that includes value attributes.
Include two check-boxes: one for “do not actually submit (even if the form info all validates)”, and one for “submit form even if validation fails”. (These aren't usual end-user options; we include them just so that we can still test our client-side validation and stickiness.)

Since these two options are mutually-exclusive, when a user selects one the other checkbox should be disabled ² ³ ⁴.
Unify the choices of drop-down menus and checkboxes with the server-side validation.
1. Create a php function which takes in an array of strings and a name ⁵, and generates the html for a drop-down menu (with the given name attribute).
  Include at least one test-case.
2. Have your form use the same php array for creating the drop-down list of attributes, and for server-side checking that the attributed tied-to is a legal choice.
3. Similarly, for the list of checkboxes of classes: Create a php function which takes in an array of strings and a name, and generates the html for a series of checkboxes (with the given name attribute).⁶
  Include at least one test-case.
4. Have your form use the same php array for creating the check-boxes of classes, and for server-side checking that the selected classes are legal.
Optional (0pts, but helpful for your sanity, and will help you in the future): separate your general-purpose php functions into their own file (the functions that you would likely want to re-use in future homeworks, like the php function to create a drop-down menu, validate a string for certain allowed charcters, etc.).
Similarly, you can also put your general-purpose javascript functions into their own file and include them.

Make your page look neat and professional! You are encouraged to make your javascript code as similar as possible as the php-validation code, including wrapper functions to abstract away the differences.

Other requirements

These apply to all homeworks for this class:

Each file start should start with with a PHP or HTML comment with your name, class, etc. (after a doctype declaration and perhaps <html>).
Use meaningful variable names, function names, and good comments as needed.
Write functions (both php and javascript) as appropriate, to avoid repeated work.
I recommend writing functions that return strings rather than print (as convenient ⁷), and including one or two test-cases as examples. Writing the test-case first often clarifies exactly what your code needs to return.
Use standard XHTML tags and make sure any javascript does not use browser-specific constructs.
All code/html should be well formatted with appropriate white space and indentation so it is easy to read.
Strive to minimize lines of code longer that 100 characters.
If you have any questions, use the discussion board.
Do not modify your final submission after the due-date; if you want to make changes, copy all your files to a new directory and work on those.

¹ True, if they came from the form and we had client-side error checking on, then theoretically there could be no errors server-side. However, we'll deal later with some validation that might only happen server-side, such as looking up login info in a database. In these cases, it's important that the form be sticky. ↩

² You disable an input field by setting its attribute disabled to "disabled"; you enable it by setting its disabled attribute to false or "" (or, having that attribute entirely non-existent). ↩

³ We saw how to set the attribute of a DOM node using javascript; that is similar to how we toggled the “display” attribute of paragraphs, in lect06a-js.html. ↩

⁴ Usually, radio-buttons are used for mutually exclusive options, though in this case you'd need three. However, for this hw you are required to use checkboxes that are dynamically disabled, to learn that skill. ↩

⁵ If you want to make your function even more general-purpose, you might pass in an additional value indicating whether the drop-down menu has an initial "please choose" or "--" neutral option, and perhaps whether or not the drop-down selection is required with any client-side check auto-coded, cool! ↩

⁶ If you want to make your function even more general-purpose, you might have your function return an array of html-for-checkboxes, so that the caller can insert those checkboxes horizontally or in a table or with br tags between them, etc., cool! ↩

⁷the function to show-source a file is one of the few exceptions ↩

home—lects—exams—hws
D2L—breeze (snow day)

©2012, Ian Barland, Radford University
Last modified 2012.Mar.28 (Wed) Please mail any suggestions
(incl. typos, broken links)
to ibarlandradford.edu

hw04 Client side validation, sticky forms

Other requirements

hw04
Client side validation, sticky forms