ITEC 325 2014spring ibarland

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

hw05
Client side validation

Due: 2014.Mar.26 (Wed) 14:00 23:59 28 (Fri) 14:00.

We will further improve on hw03—sanitized html: and automated source-listings's .W.o.W. page by adding client-side validation. Make a copy of your directory from hw04, named hw05/. (cp -pR hw03/ hw05 will Recursively copy directories, preserving timestamps.) I will grade your hw in the usual way, by visiting https://php.radford.edu/~yourUserId/itec325/hw05/index.php, which should have a listing of your files and (after the due-date) their source.

1. For each input field, have a javascript function which validates it: (a) returns true if the field is validated, and (b) otherwise returns false and displays an error message as specified below. This function should be the callback for that input's onchange event (or, onblur). Then, have an overall function formValidates() which just calls all the others, and &&'s the results. (Be sure to validate all the fields, even if the first one fails¹.)

2. Include the following input-validation, client-side (through attributes on html input tags, and/or javascript).

   1. “Your name”: required. Make it long enough that somebody named Kimberleigh-Annabelle Josephine Montgomery-Richardson ² won't be offended …but not ludicrously longer than that, to protect against somebody who inadvertently pastes in some other long text into that input.

      In the spirit of user-friendliness, we won't disallow any particular characters, but we will require at least one “letter” character: A through Z, upper or lower case. (For slight extra-credit (2pts), instead require at least one unicode letter, so that you can get accented letters, etc.).

   2. Skill-name: required; can't be too long (exact limit is up to you); the only whitespace allowed is spaces³, but any other characters are allowed. At least one non-whitespace character is required (but not necessarily a letter; “1337” might be a valid skill-name).
   3. Tied-to: an item must be selected.
      (You may get this for free, if the drop-down didn't start with a "blank" entry like "--" or "choose one".)
   4. Min-level: optional (if not provided, use 30). If entered, it must a valid number in the range.
      (Design choice: do you want to allow people to type things like "0099"? If the range had happened to include 0, would your verification accept "-0"? Should it?)
   5. Available-to: at least one check-box must be selected.
   6. Skill Description: A max-length, as you feel is appropriate. No restriction on characters, but at least one letter-character is required.
   7. Add one more input field, credit card. This field should be⁴ either 16 digits, or 16 digits with three additional separator characters (either "-" or " "). For example, “1234-5678-9876-5434” is valid, as is “1234567898765434” and even “1234-5678 9876-5434” (!⁵), but not “1234—56789876x5434”.

   Strive to make the error-messages as specific as possible. For example, if the user included an illegal character in a textbox, then the error message:

   • Poor: “the field is required, and it must be less than 20 characters long, and it cannot contain any punctuation”
   • Acceptable: “the field contains an illegal character; only letters and digits are allowed”,
   • Excellent: “the field contains ‘!’; only letters and digits are allowed”.

   If the input field fails validation, dynamically modify the html page to insert (or remove/zero-out) an error message. (Recall lect-js-hiding-parts-v3a.html; Use css to control the style of the error message.)

   To report 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 “passwd-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("passwd","the password is required"), is called, the function will

   1. check if a node passwd-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 passwd tag. This new node should have a css class “error-msg” or so.

   2. Then, assign to the innerHTML property⁶ of the DOM object. (Your function should append to any existing text, rather than just overwrite any existing innerHTML, so that multiple validation functions can all inform the user about any errors without overwriting each others' messages.)
   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 passwd-err; presumably this gets called when the field succesfully validates, and when you start a top-level page validation (since that's when you'd want to clear out any old errors).

3. 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 in the future server-side validation.) Your form should submit as you'd expect: If (and only if) submit-if-fails is checked, or (the form validates and do-not-submit is unchecked).

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

4. Separate your general-purpose javascript and php functions into their own file (the functions that you would likely want to re-use in future homeworks, like the javascript function for adding error messages, and validating that a string is a numeral within a specified range).

Make your page look neat and professional!

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—hws
D2L—breeze (snow day)

©2014, Ian Barland, Radford University Last modified 2014.Jun.04 (Wed)

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