ITEC 325 2012fall ibarland

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

hw04
Client side validation, sticky forms

Due: 2012.Nov.16, 14:00 (will be accepted through Nov.26 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.

1. Make a copy of your directory from hw03, named hw04/. (cp -pR hw03/ hw04 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”,
   and
   2. after the deadline have (for each file part of your hw04) its source-code, last-modified time, and a link to it.
2. 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.)

3. Include all the same input-validation mentioned on hw03, but do the validation client-side as well, as sensible¹

   Note:(A hw03-soln and your hw03 grades will be ready in the next couple of days — Nov.12)

   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.)

   The recommended way of reporting client-side verification errors: If you have a field (say, “passwd”), then you will use that same name in several ways:

   1. “passwd” will be the name attribute used in your HTML input tag (and hence the name of the value in the $_POST array);
   2. it will also be the id of the input tag, in the DOM;
   3. There will optionally be a paragraph with the id “fname-err” — this will be where client-side validation error messages will be dynamically inserted into the DOM.

   Then, you will have a javascript function reportError which works as follows: When (say) reportError("fname","the first name is required"), is called, the function will

   1. check if a node fname-err-msg already exists. If not, then create one: dynamically create a p (or, div, or span) node, and insert that node into the DOM immediately next to (as a sibling of) the fname tag. This new node should have a css class “error-msg” or so.

      note that

   2. Then, use setInnerHTML, to append text to the paragraph. (We append to any text, rather than just set it, so that multiple validation functions can all inform the user about any errors.)
   3. From the notes, you'll want to recall the following functions in particular: getElementById, createElement, setAttribute, insertBefore² and know that for a node you might want to set its DOM properties .color and/or .innerHTML. For example:

      var somePara = document.getElementById("my-favorite-para"); somePara.style.color = "blue"; somePara.innerHTML += "<em>watch out, we're at the end!</em>"

      Show-source, to see how the following buttons are implemented.
      
      Be sure to use a javascript console plug-in — Chrome > View > Developer > Javascript Console — to get feedback on undefined (misspelled) functions etc..
   Finally, you will want a function which clears all the text from fname-err; presumably this gets called when the field succesfully validates (or, it's cleared at the beginning of validating, and any failures will then

4. 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.
   For full points, be sure your drop-down and checkboxes are also sticky! (It only takes one if statement per box/menu.)

5. 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 then the other checkbox should be disabled⁴⁵⁶. When one of those boxes becomes unchecked, make sure the other checkbox is un-disabled. (Hint: set the other checkbox's disabled status to be the opposite status of the current box's checked status.)

6. 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

• 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.

   /** Insert a node into the DOM after the referenceNode.
    * (Complements javascript's existing 'insertBefore'.)
    * @param (node) referenceNode -- the node after which the new node will be added.
    * @param (node) newNode -- the new DOM node to add.
    * @return void
    * @author lobo235, at http://www.netlobo.com/javascript-insertafter.html
    * @version 2007.Nov.07
    */
  function insertAfter( referenceNode, newNode ) {
    referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling );
    }

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

©2012, Ian Barland, Radford University Last modified 2012.Nov.12 (Mon)

Please mail any suggestions (incl. typos, broken links) to ibarlandradford.edu