Notes for Class No. 14

Basic Form Validation Concepts and Introduction to jQuery (continued)

Tuesday, October 20, 2015

A video of this class is (or will be) posted at: http://echo360.uml.edu/heines201516/guiprogramming1.html

Handouts and Materials

Openings / Announcements / Reminders

Upcoming Quiz on Chapters 1-4 of the JavaScript & jQuery text

as announced on Piazza, this quiz will be on Thursday of this week
note that you should now be reading chapters 5 and 9 of the JavaScript text

Class Notes

Related reading for this class: JS&jQ:TMM Ch. 4, 5 & 9

Using Forms with Assignment No. 6 (continued)

Global JavaScript Methods (Functions) — Deitel Fig. 11.13 on p. 370 (1st ed.), Fig. 10.8 on p. 341 (2nd ed.), Fig. 9.9 on p. 345 (4th ed.)

http://msdn.microsoft.com/en-us/library/c6hac83s(VS.85).aspx
just about everything you can think of is available
I also find the Object reference page extremely useful: http://msdn.microsoft.com/en-us/library/htbw4ywd(VS.85).aspx

Reference: Deitel, P.J. & Deitel, H.M. Internet & World Wide Web How To Program, 4th edition. pp. 345-346.

Global
Function Description

escape Takes a string argument and returns a string in which all spaces, punctuation, accent characters and any other character that is not in the ASCII character set are encoded in a hexadecimal format that can be represented on all platforms.

unescape Takes a string as its argument and returns a string in which all characters previously encoded with escape are decoded.

eval Takes a string argument representing JavaScript code to execute. The JavaScript interpreter evaluates the code and executes it when the eval function is called. This function allows JavaScript code to be stored as strings and executed dynamically. Note: It is considered a serious security risk to use eval to process any data entered by a user because a malicious user could exploit this to run dangerous code.

isFinite Takes a numeric argument and returns true if the value of the argument is not NaN, Number.POSITIVE_INFINITY or Number.NEGATIVE_INFINITY (values that are not numbers or numbers outside the range that JavaScript supports)—otherwise, the function returns false.

isNaN Takes a numeric argument and returns true if the value of the argument is not a number; otherwise, it returns false. The function is commonly used with the return value of parseInt or parseFloat to determine whether the result is a proper numeric value.

parseFloat Takes a string argument and attempts to convert the beginning of the string into a floating-point value. If the conversion is unsuccessful, the function returns NaN; otherwise, it returns the converted value (e.g., parseFloat("abc123.45") returns NaN, and parseFloat("123.45abc") returns the value 123.45).

parseInt Takes a string argument and attempts to convert the beginning of the string into an integer value. If the conversion is unsuccessful, the function returns NaN; otherwise, it returns the converted value (e.g., parseInt("abc123") returns NaN, and parseInt("123abc") returns the integer value 123). This function takes an optional second argument, from 2 to 36, specifying the radix (or base) of the number. Base 2 indicates that the first argument string is in binary format, base 8 indicates that the first argument string is in octal format and base 16 indicates that the first argument string is in hexadecimal format.

Global Function	Description
`escape`	Takes a string argument and returns a string in which all spaces, punctuation, accent characters and any other character that is not in the ASCII character set are encoded in a hexadecimal format that can be represented on all platforms.
`unescape`	Takes a string as its argument and returns a string in which all characters previously encoded with escape are decoded.
`eval`	Takes a string argument representing JavaScript code to execute. The JavaScript interpreter evaluates the code and executes it when the eval function is called. This function allows JavaScript code to be stored as strings and executed dynamically. Note: It is considered a serious security risk to use `eval` to process any data entered by a user because a malicious user could exploit this to run dangerous code.
`isFinite`	Takes a numeric argument and returns `true` if the value of the argument is not `NaN`, `Number.POSITIVE_INFINITY` or `Number.NEGATIVE_INFINITY` (values that are not numbers or numbers outside the range that JavaScript supports)—otherwise, the function returns `false`.
`isNaN`	Takes a numeric argument and returns `true` if the value of the argument is not a number; otherwise, it returns `false`. The function is commonly used with the return value of `parseInt` or `parseFloat` to determine whether the result is a proper numeric value.
`parseFloat`	Takes a string argument and attempts to convert the beginning of the string into a floating-point value. If the conversion is unsuccessful, the function returns `NaN`; otherwise, it returns the converted value (e.g., `parseFloat("abc123.45")` returns `NaN`, and `parseFloat("123.45abc")` returns the value `123.45`).
`parseInt`	Takes a string argument and attempts to convert the beginning of the string into an integer value. If the conversion is unsuccessful, the function returns `NaN`; otherwise, it returns the converted value (e.g., `parseInt("abc123")` returns `NaN`, and `parseInt("123abc")` returns the integer value 123). This function takes an optional second argument, from 2 to 36, specifying the radix (or base) of the number. Base 2 indicates that the first argument string is in binary format, base 8 indicates that the first argument string is in octal format and base 16 indicates that the first argument string is in hexadecimal format.

The Math Package

http://www.w3schools.com/jsref/jsref_obj_math.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
random number generator and various other very useful functions
see also http://underscorejs.org

Scaffolding, Decorating, and Activating

HTML5 CSS3 JavaScript jQuery

Photo Credits

Building Scaffolding — http://blog.fieldid.com/wp-content/uploads/scaffolding_example.jpg

Pine Tree — http://www.northshoregarden.com/wp-content/uploads/2011/12/pine_tree-11921.jpg

Child Decorating Christmas Tree — http://www.wallcoo.net/holiday/2008_family_christmas_fun_1920x1200/images/Family_Christmas_fun_094_008.jpg

Christmas Celebration — http://www.wallcoo.net/holiday/2008_Family_Christmas_celebration_1920x1200/wallpapers/1920x1200/Family_Christmas_Celebration_FAN2019853.jpg

Lots & Lots of Presents — http://blogs.babble.com/being-pregnant/files/2011/12/stxmco001christmas_tree_and_presents1.jpg

As you surely realize by now, JavaScript is no longer your father’s (or your grandfather’s) toy language for making little things happen change on web pages

JavaScript is now a full-bodied language, deceptively simple but with a whole lotta gotchas
yes, it’s object-oriented, but not quite in the same way as C++ and Java
rather, JavaScript is a prototype language, so things get funky rather quickly

The key to using JavaScript, however, is not the language itself

rather, the key is understanding the browser DOM, which is its Document Object Model
the DOM is a huge tree of every object — and every attribute for every object — on a web page
this is made considerably easier using jQuery

Anatomy of a jQuery Sstatement

[figure source: jQuery: Novice to Ninja, by Castledine & Sharkie, p. 12]

the jQuery function or its alias
selectors — 100% CSS compatible
actions — functions
parameters — sometimes series of parameters, might also be object literals

Examples

The following examples and page references in orange are from jQuery: Novice to Ninja, by Castledine & Sharkie

these examples complement the ones in JavaScript & jQuery: The Missing Manual by David Sawyer McFarland
publisher’s book website: http://www.sitepoint.com/books/jquery1
authors’ websites: http://www.mrspeaker.net and http://au.linkedin.com/in/craigsharkie
code archive containing these and additional examples: http://sitepoint-code-archive.s3.amazonaws.com/jquery1-code.zip

Examples in jQuery: Novice to Ninja and JS&jQ:TMM Ch. 4

$(document).ready( function() { ... } ) ; // pp. 18-19
console.log( $('#celebs tr').length) ) ; // p. 23
console.log( $('#celebs tbody tr').length) ) ; // adding semantics for specificity, p. 23
console.log( $('#celebs tbody tr:even').length) ) // using a filter, p. 24
var fontSize = $('#celebs tbody tr:first').css('font-size') ; // p. 25
- this syntax gets (reads) a CSS property
- what gets returned if the font-size is not specified?
- what units apply to the value returned?
- rendering and calculated styles
$('#celebs tbody tr:even').css('background-color', '#dddddd') ; // p. 26
- this syntax sets (writes) a CSS property
$('#celebs tbody tr:even').css('background-color', '#dddddd') ; // p. 27
$('#celebs tbody tr:even').css('color', '#66666') ;
- these statements set two CSS properties
- note the quotes — it’s best to include them
- if you don’t, you must use camel case syntax, e.g., backgroundColor instead of background-color
$('#celebs tbody tr:even').css('background-color', '#dddddd').css('color', '#66666') ;
- these statements set two CSS properties using chaining
- note that chaining occurs from left to right

$('#celebs tbody tr:even').css(  // p. 28
  { 'background-color' : '#dddddd',
    'color' : '#666666' }  ) ;

these statements also set two CSS properties, but using an object literal

Adding and removing classes (pp. 30-31)

```
$('div').addClass('class_name') ; 
```
- adds one class

$('div').addClass('class_name1 class_name2 class_name3') ;

adds multiple classes

.zebra { /* a class for zebra striping */
  background-color: #dddddd ;
  color: #666666 ;
}

$('#celebs tr:even').addClass('zebra') ;
- adds the class to the selected elements
$('#celebs tr.zebra').removeClass('zebra') ;
- removes the class from the selected elements

Form Events (JS&jQ:TMM p. 263-268)

submit — triggered when the form is submitted
- useful for validation, because this even occurs before the form’s action is taken
focus — triggered when a control gains focus
- can also be used to set focus to a control
blur — triggered when a control loses focus
click — triggered when a control is clicked
change — triggered whenever a control is changed
- useful in text boxes
note that these events are not triggered if a control is disabled

Basic Validation using JavaScript and jQuery

Using the jQuery submit() event handler

1  $(document).ready( function() {
2    tblInitializer.initialize() ;
3    tblGenerator.populateMultiplicationTable_jQuery( "#placeholder", true ) ;
4    $('#frm').submit( function() {   // trap the submit event *before* the action is executed
5      return validateForm() ;  // true = allow action to proceed, false = inhibit action
6    } ) ;
7  } ) ;  // end ready

Writing validation tests

retrieving and testing form field data
- the jQuery val() function
- the jQuery html() function
- the JavaScript isNaN() function
retrieving the contents of non-textual controls
using the return statement efficiently
- ordering your tests efficiently
writing helper functions
- the $( '#' + str ) trick
displaying error message on the screen
- consistent location
- other visual clues
- setting focus to the erroneous field

Remember the three pillars of good error messages:

identify where the error occurred — direct the user to the precise location of the error
identify why the error occurred — explain exactly what the problem is
suggest how to correct the error — provide information to guide the user to correcting his/her entry

Initializing form fields

issue: when the form is reloaded, the form’s text fields will be cleared
- “visual integrity”
- if the user wants to regenerate the table, he or she probably won’t want to change them all
solution: put the values read from the passed parameters back into the form’s text fields as defaults
suggestion: use this as a way to test that you are reading the passed parameters properly
best practice: don’t assign the passed values to the variables that control the table’s display until you know they’re valid
what constitutes valid?
- first, and most obviously, that they are numbers
  - use the JavaScript isNaN() function?
- however, even before that you should check whether the parameter exists
- you might also check that xBegin <= xEnd and yBegin <= yEnd

Form Validation Demonstration

developed with student Alan Szmyt, Fall 2015 semester

Note addition to line 60 from what’s on the handout:

60 if ( parameters !== null && parameters !== "" ) {

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Form Validation with Alan Szmyt</title>
    <meta charset="UTF-8">

<!--
  Simple Form Validation Demonstration
  developed with 91.461 Fall 2015 Student Alan Szmyt
  
  File:  /~heines/91.461/91.461-2010-11f/CSSTests/FormattingText/web/alantest.html
  Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu
  Copyright (c) 2015 by Jesse M. Heines.  All rights reserved.  May be freely 
    copied or excerpted for educational purposes with credit to the author.
  updated by JMH on October 19, 2015 at 12:27 PM
-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
      </script>
    <script>
      "use strict";  // ensure that all variables are declared before their use
      
      // this is the non-jQuery version
      var validate = function() {
        console.log( "Called function validate(): username = \"" +  +
            document.getElementById("username").value + "\" and " +
            "is blank = " + ( document.getElementById("username").value === "" ) ) ;
        // test that the field was not left blank
        if ( document.getElementById("username").value === "" ) {
          document.getElementById("message").innerHTML = "Please enter your username." ;
          return false ;  // suppress form submission
        }
        return true ;  // allow form submission to proceed
      } ;
      
      // this is the jQuery version
      // note the addition of an event parameter, which is supplied automatically
      var jQueryValidate = function( event ) {
        console.log( "Called function jQueryValidate(): username = \"" + 
            $("#username").val() + "\" and " +
            "is blank = " + ( $("#username").val() === "" ) ) ;
        // test that the field was not left blank
        if ( $("#username").val() === "" ) {
          $("#message").html( "Please enter your username." ) ;
          event.preventDefault() ;  // suppress form submission
        }
      } ;
      
      // extract the username parameter if it exists
      var parameters = null ;  // here parameters is the null object
      if ( location.search !== "" ) {
        parameters = location.search.substr(1) ;
            // note that this redefines the type of parameters to be a string
      }
      var strUserName = "" ;
      // console.log( "parameters = " + parameters ) ;
      // console.log( "typeof parameters = " + typeof parameters ) ;
      // console.log( "( location.search === \"\" ) = " + ( location.search === "" ) ) ;
      if ( parameters !== null && parameters !== "" ) {
        parameters = parameters.split( "&" ) ;  
            // note that this redefines the type of parameters to be an array
        console.log( "parameters before filtering = " + parameters ) ;
        // filter the parameters to find the one we want, which is "username"
        // see http://api.jquery.com/jquery.grep/ for the following syntax
        parameters = $.grep( parameters, function( oneString, index ) {
          return ( oneString.indexOf( "username") !== -1 ) ;
        }) ;
        console.log( " parameters after filtering = " + parameters ) ;
        // extract the value of the username parameter (the part after the = sign)
        strUserName = parameters[0].split("=")[1] ;
        console.log( "username = " + strUserName ) ;
      }
      
      // you must wait for the page to be loaded before executing these statements
      // this is why we put them inside jQuery's document ready function
      $(document).ready( function() {
        // the first parameter to the replace function is a regular expression
        $("#username").val( strUserName.replace( /\+/g, " ") ) ;
        // display the username if it is supplied
        if ( strUserName !== "" ) {
          $("#message").html( "Your username is <strong>" + 
              strUserName.replace( /\+/g, " ") + "</strong>." ) ;
        }
        // identify which version is running
        if ( typeof $("#form1").html() !== "undefined" ) {
          $("#version").html( "Version 1 - Using Native JavaScript" ) ;
        } else if ( typeof $("#form2").html() !== "undefined" ) {
          $("#version").html( "Version 2 - Using jQuery" ) ;
        }
        // jQuery method for initiating form validation
        $("#form2").submit( jQueryValidate ) ;
      });
    </script>
  </head>
  <body>
    <!-- title and version identifier -->
    <h2>Simple Form Validation with Alan Szmyt</h2>
    <h4><em>October 19, 2015</em></h4>
    <h3 id="version"></h3>
    
    <!-- the username entry form -->
    <!-- remember that action="" causes the current page to be reloaded -->
<!--
    native JavaScript version
-->
    <form id="form1" method="get" action="" onsubmit="return validate();">
<!--
    jQuery version
        note that for this version, the 
            $("#form2").submit( jQueryValidate ) ;
        line above must not be commented out
    <form id="form2" method="get" action="">
-->
      <p id="instructions" style="margin-top: 30px">Please enter your username and 
          click the <strong>Submit My Username</strong> button.</p>
      <input type="text" name="username" id="username">
      <input type="submit" name="submit" value="Submit My Username">
      <!-- placeholder for printing messages to the user -->
      <p id="message"></p>
    </form>
  </body>
</html>

Live Demo

This is document http://jesseheines.com:8080/~heines/91.461/91.461-2015-16f/461-lecs/lecture14.jsp. It was last modified on Friday, August 26, 2022 at 4:09 PM.
Copyright © 2022 by Jesse M. Heines. All rights reserved. May be freely copied or excerpted for educational purposes with credit to the author.

UMass Lowell Dept. of Computer Science

91.461 GUI Programming I

Fall 2015 Semester, Section 201

Prof. Jesse M. Heines