added form validation demo

tailrecursion · Feb 17, 2013 · 4c93fd5 · 4c93fd5
1 parent b30133e
commit 4c93fd5
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 0 deletions.
diff --git a/public/form_validation.html b/public/form_validation.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8'>
+    <title>Javelin Form Validation Demo</title>
+    <link rel="stylesheet" type="text/css" href="style.css"/>
+    <style type="text/css">
+      fieldset div {
+              margin:0.3em 0;
+              clear:both;
+      }
+
+      form {
+              margin:1em;
+              width:15em;
+      }
+
+      label {
+              float:none;
+              width:12em;
+              display:block;
+              clear:both;
+      }
+
+      legend {
+              color:#0b77b7;
+              font-size:1.4em;
+      }
+
+      legend span {
+              width:10em;
+              text-align:right;
+      }
+
+      input {
+              font-size: 16pt;
+              padding:0.15em;
+              width:10em;
+              border:1px solid #ddd;
+              display:block;
+              float:left;
+      }
+
+      fieldset {
+              border:1px solid #ddd;
+              padding:0 0.5em 0.5em;
+      }
+
+      input.good {
+        -moz-box-shadow: inset 2px 2px 10px green;
+        box-shadow:      inset 2px 2px 10px green;
+      }
+
+      input.bad {
+        -moz-box-shadow: inset 2px 2px 10px orange;
+        box-shadow:      inset 2px 2px 10px orange;
+      }
+    </style>
+  </head>
+  <body onload="tailrecursion.javelin_demos.form_validation.start()">
+
+    <em>This <a href="https://github.com/tailrecursion/javelin/">Javelin</a> demo validates form inputs.</em><br/>
+
+    <form id="form">
+      <fieldset>
+        <legend>Sign Up</legend>
+
+        <div>
+          <label for="name">Name</label>
+          <input type="text" name="name" id="name">
+        </div>
+
+        <div>
+          <label for="phone">Phone (with area code)</label>
+          <input type="text" name="phone" id="phone">
+        </div>
+
+        <div>
+          <label for="age">Age</label>
+          <input type="text" name="age" id="age">
+        </div>
+
+        <div>
+          <label for="email">Email Address</label>
+          <input type="email" name="email" id="email">
+        </div>
+
+        <div>
+          <label for="password">Password (5 char min)</label>
+          <input type="password" name="password" id="password">
+        </div>
+
+        <div>
+          <label for="submit"></label>
+          <input type="submit" value="Sign Up &rarr;" id="submit">
+        </div>
+      </fieldset>
+    </form>
+    <a href="https://github.com/tailrecursion/javelin-demos/blob/master/src/cljs/tailrecursion/javelin-demos/form_validation.cljs">ClojureScript source</a>
+    <script src='demos.js'></script>
+  </body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -12,6 +12,7 @@ <h1>Javelin Demos</h1>
     <ul>
       <li><a href="frequencies.html">Random Number Frequencies</a></li>
       <li><a href="lettercount.html">Letter Count</a></li>
+      <li><a href="form_validation.html">Form Validation</a></li>
     </ul>
     <script src='demos.js'></script>
   </body>

diff --git a/src/cljs/tailrecursion/javelin-demos/form_validation.cljs b/src/cljs/tailrecursion/javelin-demos/form_validation.cljs
@@ -0,0 +1,53 @@
+;   Copyright (c) Alan Dipert and Micha Niskin. All rights reserved.
+;   The use and distribution terms for this software are covered by the
+;   Eclipse Public License 1.0 (http://opensource.org/licenses/eclipse-1.0.php)
+;   which can be found in the file epl-v10.html at the root of this distribution.
+;   By using this software in any fashion, you are agreeing to be bound by
+;   the terms of this license.
+;   You must not remove this notice, or any other, from this software.
+
+(ns tailrecursion.javelin-demos.form-validation
+  (:require [tailrecursion.javelin-demos.dom :refer [input-to by-id validator]]
+            [clojure.browser.event :as event])
+  (:require-macros [tailrecursion.javelin.macros :refer [cell]]))
+
+(def preds
+  {:name     #(not (empty? %))
+   :phone    #(boolean (#{10 11} (count (re-seq #"\d" %))))
+   :age      #(> % 0)
+   :email    #(boolean (re-matches #".+@.+\..+" %))
+   :password #(>= (count %) 5)})
+
+(defn validate
+  [id-or-elem pred]
+  (validator id-or-elem pred "bad" "good"))
+
+(defn ^:export start []
+
+  (let [form (cell '{:name ""
+                     :phone ""
+                     :age 0
+                     :email ""
+                     :password ""})
+        valid? (cell (every? identity (map (fn [[k v]] ((preds k) v)) form)))]
+
+    (input-to form [:name] "#name"
+              :validator (validate "#name" (preds :name)))
+    (input-to form [:phone] "#phone"
+              :validator (validate "#phone" (preds :phone)))
+    (input-to form [:age] "#age"
+              :type :int
+              :insert-default? false
+              :validator (validate "#age" (preds :age)))
+    (input-to form [:email] "#email"
+              :validator (validate "#email" (preds :email)))
+    (input-to form [:password] "#password"
+              :validator (validate "#password" (preds :password)))
+
+    (cell (aset (by-id "#submit") "disabled" (not valid?)))
+
+    (event/listen (by-id "#form")
+                  "submit"
+                  #(do (js/alert (format "Good job dood! Your info: %s" (pr-str @form))) false))
+
+    (.focus (by-id "#name"))))