FormGenie DEMO source

gistfile1.html

<form method="post" action="#/stubs/register.php" class='fg-form'>
    <div class="well">
      <label for="email">Enter your email</label> <input type="text" class="form-control"
      name="email" />
    </div>

    <div class="well">
      <label for="myNumberField">Enter our secret pin (500-0000)</label> <input type=
      "text" name="pin" class="form-control" data-regex="5(\d\d)-(\d{4})$"
      data-regex-flags="gi" />
    </div>

    <div class="well">
      <label for="myNumberField"><span class="label label-info">OPTIONAL</span> What's
      the most important thing about fish?</label> <input type="text" name="fishfield"
      class="form-control" data-optional='' />
    </div>

    <div class="well">
      <label for="password">Enter your Password</label> <input type="password" class=
      "form-control" name="password" /><br />
      <br />
      <label for="password">Enter your Password confirmation</label> <input type=
      "password" class="form-control" name="password_confirmation" />
    </div>    

    <div class="well">
      <label for="terms_of_usage"><input type="checkbox" name="terms_of_usage" /> Accept
      our terms of usage <span class="label label-danger">REQUIRED</span></label><br />
      <label for="nsa"><input type="checkbox" name="nsa" /> Send all my data to the NSA
      server <span class="label label-default">OPTIONAL</span></label>
    </div>

    <div class="well">
      <input type="submit" class="btn btn-success btn-block btn-large btn-lg" value=
      "Validate &amp; Send" />
    </div>
  </form>
  
  <!-- just a tiny bit of javascript :) -->
  <script>
    var myForm = new FormGenie('form');
    myForm.magicForms();
  </script>