ITEC 325 2013spring ibarland

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

hw05
Client side validation

Due: 2012.Mar.26 (Tue) 23:59. (Accepted through Wed. 23:59)
However, try to have it done by Friday, or at least all conceptual hurdles cleared, so you can use the weekend for hw06: server-side validation.

We will further improve on hw04—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 hw04/ 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. 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-Anne Josephine Montgomery-Richardson ¹ won't be offended, but not too much 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 charactes, 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. 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?)

      As part of this step, you must have a javascript function that takes in a string and two integers (an upper and lower bound), and returns an error message (if it doesn't represent an integer in that range, inclusive), or the empty string (if it does). Be sure to give a descriptive name to this function.

   4. Skill Description: A max-length, as you feel is appropriate. No restriction on characters, but at least one letter-character is required.
   5. 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 lect06a-js—case study: refactoring javascript; 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 “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.

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

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

3. Separate your general-purpose javaswcript 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, or perhaps validating that a number is in 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—exams—hws
D2L—breeze (snow day)

©2012, Ian Barland, Radford University Last modified 2013.Mar.26 (Tue)

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