Add a simple forms example

assets/js/ex12.coffee

@@ -1 +1,36 @@
-jQuery ($) ->
+jQuery ($) ->
+  $subject = $("#subject")
+  $controls = $("#controls")
+
+  $controls.on "change", ->
+    $subject.attr "class", ""
+    $controls.find("input:checked").each ->
+      $subject.addClass this.value
+
+  validate = (elementId, callback) ->
+    $element = $("##{elementId}")
+    $group = $element.parents(".control-group")
+    $group.removeClass("error").find("[data-error]").remove()
+
+    msg = callback $element.val()
+
+    if msg
+      $group
+        .addClass("error")
+        .find(".controls")
+        .append("""
+          <p class="help-block" data-error=true>
+            #{msg}
+          </p>""")
+
+  $subject.on "submit", ->
+
+    validate "email", (val) ->
+      if val.indexOf("@") < 1
+        "Please enter a properly formatted E-Mail address."
+
+    validate "confirm", (val) ->
+      if val != $("#email").val()
+        "Please enter the same E-Mail address twice."
+
+    return false

views/ex12.jade

@@ -1,5 +1,32 @@
 extend layout
 block body
   .container
+    form.form-horizontal.well.well-small#controls
+        .control-group
+          label.control-label
+            | Form Class:
+          .controls
+            for name in ['horizontal']
+              label.inline.checkbox
+                input(type='checkbox', value="form-#{name}")
+                | form-#{name}
+
+    form#subject
+      .control-group
+        label.control-label E-Mail Address:
+        .controls
+          .input-prepend
+            span.add-on: i.icon-envelope 
+            input.input-large#email(type='text', placeholder="you@hostname.com")
+      .control-group
+        label.control-label Confirm E-Mail:
+        .controls
+          .input-prepend
+            span.add-on: i.icon-envelope 
+            input.input-large#confirm(type='text', placeholder="you@hostname.com")
+          p.help-block Confirm your E-mail address by entering it again.
+      .form-actions
+        button.btn.btn-primary Register
+
 append head
   != js("ex12")