anchor.diff:  ', :html %>
           
           <p>In the above example we have wrapped our input in a <code>div</code>. This div will receive an <code>error</code> class when the input is invalid. This class will show our error message and style the label and input accordingly.</p>
  +
  +        <p>Invalid inputs inherit a <code>data-invalid</code> attribute.</p>
  +
  +        <div class="row">
  +          <div class="large-12 columns">
  +            <hr>
  +          </div>
  +        </div>
  +
  +        <h3>Events</h3>
  +
  +        <p>If a submit event is fired, a <code>valid</code> event is fired if the form is valid and an <code>invalid</code> event is fired if the form is invalid.</p>
  +
  +        <p>You can bind to these events and fire your own callback:</p>
  +
  +<%= code_example "
  +$('#myForm')
  +  .on('invalid', function () {
  +    var invalid_fields = $(this).find('[data-invalid]');
  +    console.log(invalid_fields);
  +  });
  +  .on('valid', function () {
  +    console.log('valid!');
  +  });
  +", :js %>
  +
  +        <div class="row">
  +          <div class="large-12 columns">
  +            <hr>
  +          </div>
  +        </div>
  +
  +        <h3>Using the JavaScript</h3>
  +        <p>You'll need to include <code>foundation.abide.js</code> to get plugin to work. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the alert plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
  +
  +        <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
  +
  +        <p>Required Foundation Library: <code>foundation.abide.js</code></p>
  +
  +        <h5>Optional JavaScript Configuration</h5>
  +
  +<%= code_example '
  +{
  +  live_validate : true,
  +  focus_on_invalid : true,
  +  timeout : 1000,
  +  patterns : {
  +    alpha: /[a-zA-Z]+/,
  +    alpha_numeric : /[a-zA-Z0-9]+/,
  +    integer: /-?\d+/,
  +    number: /-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?/,
  +
  +    // generic password: upper-case, lower-case, number/special character, and min 8 characters
  +    password : /(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/,
  +
  +    // amex, visa, diners
  +    card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
  +    cvv : /^([0-9]){3,4}$/,
  +
  +    // http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
  +    email : /^[a-zA-Z0-9.!#$%&\'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
  +
  +    url: /(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&\'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&\'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&\'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&\'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&\'\(\)\*\+,;=]|:|@)|\/|\?)*)?/,
  +    // abc.de
  +    domain: /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$/,
  +
  +    datetime: /([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))/,
  +    // YYYY-MM-DD
  +    date: /(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))/,
  +    // HH:MM:SS
  +    time : /(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}/,
  +    dateISO: /\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}/,
  +    // MM/DD/YYYY
  +    month_day_year : /(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d/,
  +
  +    // #FFF or #FFFFFF
  +    color: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
  +  }
  +}', :js %>
  +
         </div>
       </div>
   
  
positive.code: </form>
  ', :html %>
  
          <h3>Predefined patterns</h3>
  
          <p>Abide has several patterns common validation patterns built into the library:</p>
  
negative.code: <% @side_nav = "js" %>
  
  <div class="row">
    <div class="large-9 push-3 columns">
  