Cacher is the code snippet organizer for pro developers

/** Basic Styling **/ 
.container {
  font-size: 75%;
  color: #222;
  background: #fff;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
 
/** Field Styles **/
.container .field, #form-title.field {
  padding-bottom: 12px;
  padding-top: 12px;
  position: relative;
  clear: both;
}
 
/** Field Widths */
.f_100 {
  width: 96%;
  display: inline;
  float: left;
  margin-left: 2%;
  margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}
 
.container input {
  width:100%;
  font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
  padding: 6px 0;
  color: #999999;
  border: 1px solid #d9d9d9;
  outline: none;
  display: inline-block;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 10px #eee inset;
  -moz-box-shadow: 0 0 10px #eee inset;
  -webkit-box-shadow: 0 0 10px #eee inset;
  -ms-box-shadow: 0 0 10px #eee inset;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
}
 
.container input:focus {
  -webkit-box-shadow: 0px 0px 5px #bfdeff;
  -moz-box-shadow: 0px 0px 5px #bfdeff;
  box-shadow: 0px 0px 5px #bfdeff;
}
 
.container label {
  color: #666;
  text-align: left;
  font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
}
 
.container .submit input {
  text-align: center;
  font-size: 14px;
  text-decoration: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  text-shadow: 1px 1px 0px #fff;
  display: block;
  margin: 12px -2px 12px 0;
  text-align: center;
  float: right;
  padding: 6px 12px;
  height: 36px;
  cursor: pointer;
  min-width: 96px;
  width:auto;
  background: #FBFBFB; /* old browsers */
  background: -moz-linear-gradient(top, #FBFBFB 0%, #EEEEEE 99%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FBFBFB), color-stop(99%, #EEEEEE)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FBFBFB', endColorstr = '#EEEEEE', GradientType = 0); /* ie */    border: 1px solid #cfcfcf;
  font-weight: bold;
  color: #666;
}
 
/**Error Messages **/
.container .error {
  height: 16px;
  font: 11px/16px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
  color: #ff0033;
  padding-left: 12px;
  z-index: 999;
  position:relative;
  top:-1px;
}
 
 
/** Loading Indicator **/
.loading-text{
  position:relative;
  top:-3px;
}
 
 
/** Clearfix */
.clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}
 
/*
    The following zoom:1 rule is specifically for IE6 + IE7.
    Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
  zoom: 1;
}

$(document).ready(function() {
  //
  // Sets a single error (width or height)
  //
  function setError(type) {
    $('#' + type + '-container')
      .find('label')
      .after('<span class="error">' + type + ' must be a number.</span>');
  }

  //
  // Sets all errors and returns a value
  // indicating if the form is valid.
  //
  function isValid(width, height) {
    var isValid = true;
    
    //
    // Reset errors
    //
    $('.field').find('.error').remove();
    $('#sqfoot-result').text('');
    
    if (isNaN(height)) {
      setError('height');
      isValid = false;
    }
    
    if (isNaN(width)) {
      setError('width');
      isValid = false;
    }
    
    return isValid;
  }

  /**
   * Handle the form submission, display success message if
   * invalid input is supplied. Otherwise display the output
   * in the target div. 
   */    
  $('#sqfoot-form').submit(function () {
    var inputs = {
      height: $('#height').val(),
      width:  $('#width').val()
    };
    
    var values = {
      height: parseFloat(inputs.height),
      width: parseFloat(inputs.width)
    };
    
    if (isValid(values.width, values.height)) {
      $('#sqfoot-result').text('Calculated area (sqft): ' + (values.width * values.height).toFixed(4));
    }
    
    return false;
  });  
});

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="styles.css" media="screen" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="sq-foot.js"></script>
  </head>
  <body>
    <div class="container">
      <h2 id="sqfoot-result" class="f_100"></h2>
      <form id="sqfoot-form" novalidate="">
        <div id="width-container" class="field f_100">
          <label for="width">Width</label> <input type="text" name="width" id="width" value="10" required="required" pattern="\d+.?\d+">
        </div>
        <div id="height-container" class="field f_100">
          <label for="height">Height</label> <input type="text" name="height" id="height" value="10" required="required" pattern="\d+.?\d+">
        </div>
        <div id="form-submit" class="field f_100 clearfix submit">
          <input type="submit" value="Submit">
        </div>
      </form>
    </div>
  </body>
</html>