Client side validation

Due: 2021.Mar.24 (Wed) 23:59
Submit on D2L, and as usual have your a link to your form available at https://php.radford.edu/~yourUserId/itec325/hw06/index.php. (No hardcopy needed.)

Note: Points-possible are approximate, and may change somewhat when grading.

We will further improve on server-side-validation/’s Okaymon page by adding client-side validation. Make a copy of your directory from hw05 ¹, named hw06/. (cp -pR hw05/ hw06 will Recursively copy directories, preserving timestamps.) Alternately, use any/all of the hw05-soln (or even the hw03-soln).

(30pts) Using html attributes like maxlength etc., validate all input fields using the same criteria as on the previous homework.
Be sure to use your named-constants file, for the field-lengths. (1/3 of the points are for that.)

Note that this interacts with our previously-written functions for generating dropdowns and radio-buttons; we now want to have those input tags include a required="required" attribute, and perhaps other attributes. There are several ways to do this, but I suggest a fairly general solution: add a(nother) argument to those functions: an array whose key/value pairs are the additional html attributes you want to have included. Good thing we already wrote a function that can help with this! By making this an optional argument whose default-value is the empty array, we are still backwards-compatible with all our previous test-cases (though you'll want to add another few test cases, to test this new functionality).
(10pts) As a javascript warm-up: Make your submit-button be greyed-out (set its disabled attribute), if the Intellectual Property checkbox is not selected.
You don't need to have any other inputs affect the submit-button this way.
(20pts) We're going to add one further validation requirement: the Okaymon's weight must be less than 10,000 lbs. That is, we want to give an error if the user enters a weight of 5000kg ≈ 5000kg·2.2lbs/kg = 11,000lbs.
Write a separate javascript function which does this: if the field is too big, it inserts the message-text into a nearby span whose id is weight-err.
(You may write reportError yourself, or use the version in the notes (with citation of course).)

Make sure that onsubmit of the form, you also call the validation function for the weight; if it is too large, then the form doesn't get submitted (and the error-message is being shown).

You do not need to have your javascript in an external file, for this homework. In fact, since some of the validation requires info from the constants-file, a pure-external-javascript solution would mean generating that .js — either on each fetch, or a more-static version which you must be sure to regenerate each time okaymon-constants.php is changed.
Optional/extra-credit: For text inputs, immediately upon being entered, your javascript can trim and collapse whitespace as in hw02. (And for even a bit more extra-credit, if this results in changing what the user typed, you can display a message politely informing the user that their information was changed/normalized. You should be able to re-use code which inserted error-messages, perhaps refactoring a bit to support error- and non-error messages.)

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.

¹ You can also use the hw05-soln; just cite your source as usual. ↩

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

This page licensed CC-BY 4.0 Ian Barland
Page last generated Please mail any suggestions
(incl. typos, broken links)
to ibarlandradford.edu