Grad Assignment 4

by Larry Adams

HTML

<div class="container">

<form action="#" method="post" name="registration">

<fieldset>
     <legend>
         <h1>NMC Registration:</h1>
    </legend>

       
  <span id="sprytextfield1">
      <label><strong>First Name:</strong><br>
        <input type="text" name="fname" id="fname">
        </label>
      <span class="textfieldRequiredMsg">A value is required.</span></span>
          
          <span id="sprytextfield2"><br>
        <label><strong>Middle Name:</strong><br>
          <input type="text" name="mname" id="mname">
          </label>
        <span class="textfieldRequiredMsg">A value is required.</span></span>
            
            <span id="sprytextfield3"><br>
          <label><strong>Last Name:</strong><br>
            <input type="text" name="lname" id="lname">
            </label>
          <span class="textfieldRequiredMsg">A value is required.</span></span>
              
              <span id="sprytextfield4"><br>
            <label><strong>Suffix:</strong><br>
              <input type="text" name="suffix" id="suffix">
            </label>
          <span class="textfieldRequiredMsg">A value is required.</span></span><br>
    
                <span id="sprytextfield5">
      <label><strong>Street: </strong><br>
        <input name="street" type="text" id="street" size="50" maxlength="50">
        </label>
      <span class="textfieldRequiredMsg">A value is required.</span></span>
      
          <span id="sprytextfield6"><br>
        <label><strong>City:</strong><br>
          <input type="text" name="city" id="city"  size="50" maxlength="50">
          </label> <span class="textfieldRequiredMsg">A value is required.</span></span>
            <br>
           
                <label> <strong>Country:</strong><br>
          <select id="country" name="country" required>
            <option>----- Select A Country -----</option>
            </select>
          </label> <br>
          
              <label> <strong>State:</strong><br>
    ...

CSS

@charset "UTF-8";

/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.passwordRequiredMsg, 
.passwordInvalidStrengthMsg, 
.passwordMinCharsMsg,
.passwordMaxCharsMsg,
.passwordCustomMsg,
.passwordValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .passwordRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.passwordRequiredState .passwordRequiredMsg,
.passwordMinCharsState .passwordMinCharsMsg,
.passwordMaxCharsState .passwordMaxCharsMsg,
.passwordInvalidStrengthState .passwordInvalidStrengthMsg,
.passwordCustomState .passwordCustomMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}

/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid Strength / minValue / maxValue / custom invalid , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */

 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.passwordValidState input, input.passwordValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.passwordRequiredState, .passwordRequiredState input, 
input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, 
input.passwordMinCharsState, .passwordMinCharsState input, 
input.passwordCustomState, .passwordCustomState input, 
input.passwordMaxCharsState,...

JavaScript

(function() { // BeginSpryComponent

if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.BrowserSniff = function()
{
	var b = navigator.appName.toString();
	var up = navigator.platform.toString();
	var ua = navigator.userAgent.toString();

	this.mozilla = this.ie = this.opera = this.safari = false;
	var re_opera = /Opera.([0-9\.]*)/i;
	var re_msie = /MSIE.([0-9\.]*)/i;
	var re_gecko = /gecko/i;
	var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
	var r = false;

	if ( (r = ua.match(re_opera))) {
		this.opera = true;
		this.version = parseFloat(r[1]);
	} else if ( (r = ua.match(re_msie))) {
		this.ie = true;
		this.version = parseFloat(r[1]);
	} else if ( (r = ua.match(re_safari))) {
		this.safari = true;
		this.version = parseFloat(r[2]);
	} else if (ua.match(re_gecko)) {
		var re_gecko_version = /rv:\s*([0-9\.]+)/i;
		r = ua.match(re_gecko_version);
		this.mozilla = true;
		this.version = parseFloat(r[1]);
	}
	this.windows = this.mac = this.linux = false;

	this.Platform = ua.match(/windows/i) ? "windows" :
					(ua.match(/linux/i) ? "linux" :
					(ua.match(/mac/i) ? "mac" :
					ua.match(/unix/i)? "unix" : "unknown"));
	this[this.Platform] = true;
	this.v = this.version;

	if (this.safari && this.mac && this.mozilla) {
		this.mozilla = false;
	}
};

Spry.is = new Spry.Widget.BrowserSniff();

Spry.Widget.ValidationConfirm = function(element, firstInput, options)
{
	options = Spry.Widget.Utils.firstValid(options, {});

	if (!this.isBrowserSupported())
		return;

	if (this.init(element, firstInput, options) === false)
		return false;

	var validateOn = ['submit'].concat(Spry.Widget.Utils.firstValid(this.options.validateOn, []));
	validateOn = validateOn.join(",");

	this.validateOn = 0;
	this.validateOn = this.validateOn | (validateOn.indexOf('submit') != -1 ? Spry.Widget.ValidationConfirm.ONSUBMIT : 0);
	this.validateOn = this.validateOn | (validateOn.indexOf('blur') != -1 ? Spry.Widget.ValidationConfirm.ONBLUR :...