Notes for Class No. 15

Introduction to jQuery (continued)

Thursday, October 22, 2015

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

Handouts and Materials

Assignment No. 7 is now posted

this assignment requires material covered in Chapter 9 of the JavaScript and jQuery text

Openings / Announcements / Reminders

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

Faculty Advising Period begins next week — Monday, October 26

many of you haven’t looked at the Grade Display Program in quite a while
remember that you must achieve a C or better in this course to get into 91.462 GUI Programming II
if your average at this point is below 80, you are in danger of not getting into 91.462

Class Notes

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

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

Various Versions of the Multiplication Table Generator Program

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

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

As posted on Piazza, the problem with the code developed in class on Tuesday was simply that the JavaScript tried to populate the “message” paragraph before the page had finished loading.

At that point, that paragraph did not yet exist, and unfortunately JavaScript doesn’t print an error message in this instance.
The fix was to enclose the $("#message").html( ... ) line in the $(document).ready() function as shown in the code below.

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/lecture15.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