Demo : Adding new callback demo page

This demonstrates the use of a custom validation callback, useful for one-off inputs or perhaps for validating two inputs in relation to one another
draganbabic · Jan 23, 2011 · 55d149f · 55d149f
1 parent 2b8675a
commit 55d149f
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 1 deletion.
diff --git a/demos/callback.html b/demos/callback.html
@@ -0,0 +1,126 @@
+<!doctype html>
+<html lang="en-us" dir="ltr">
+  <head>
+  <meta charset="utf-8">
+<!-- 
+
+   Copyright (c) 2010, Dragan Babic
+   
+   Permission is hereby granted, free of charge, to any person
+   obtaining a copy of this software and associated documentation
+   files (the "Software"), to deal in the Software without
+   restriction, including without limitation the rights to use,
+   copy, modify, merge, publish, distribute, sublicense, and/or sell
+   copies of the Software, and to permit persons to whom the
+   Software is furnished to do so, subject to the following
+   conditions:
+   
+   The above copyright notice and this permission notice shall be
+   included in all copies or substantial portions of the Software.
+   
+   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+   EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+   OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+   NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+   HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+   WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+   OTHER DEALINGS IN THE SOFTWARE.
+
+-->
+    <title>Uni&ndash;Form</title>
+
+    <link href="../css/uni-form.css" media="screen" rel="stylesheet"/>
+    <link href="../css/default.uni-form.css" title="Default Style" media="screen" rel="stylesheet"/>
+    <link href="./css/demo.css" media="screen" rel="stylesheet"/>
+
+    <!--[if lte ie 7]>
+      <style type="text/css" media="screen">
+        /* Move these to your IE6/7 specific stylesheet if possible */
+        .uniForm, .uniForm fieldset, .uniForm .ctrlHolder, .uniForm .formHint, .uniForm .buttonHolder, .uniForm .ctrlHolder ul{ zoom:1; }
+      </style>
+    <![endif]-->
+
+  </head>
+
+  <body>
+
+    <h1><a href="http://sprawsm.com/uni-form/" title="visit Uni–Form online"><img src="../img/uni-form-logo.png" alt=""/></a></h1>
+
+    <form action="#" class="uniForm">
+
+      <fieldset>
+        <h3>Client side form demonstration</h3>
+
+        <div class="ctrlHolder">
+          <label for=""><em>*</em> Custom callback item</label>
+          <input name="name" id="name" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput required validateCallback my_code_callback"/>
+          <p class="formHint">A two letter code of a number and a letter: A4, B8, C2</p>
+        </div>
+
+        <div class="ctrlHolder">
+          <label for=""><em>*</em> Your email</label>
+          <input name="email" id="email" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput validateEmail"/>
+          <p class="formHint">A valid email address</p>
+        </div>
+
+        <div class="ctrlHolder">
+          <p class="label">Privacy agreement</p>
+          <ul class="blockLabels">
+            <li><label for=""><input type="checkbox" name="agreement" class="required"> I have read the agreement</label></li>
+          </ul>
+        </div>
+
+      </fieldset>
+
+      <div class="buttonHolder">
+        <button type="submit" class="secondaryAction">← Cancel and go back</button>
+        <button type="submit" class="primaryAction">Submit</button>
+      </div>
+
+    </form>
+
+    <div id="footer">
+      <p>Uni-Form is created by <a href="http://sprawsm.com/" title="Dragan is the founder of Superawesome">Dragan Babić</a> and is licensed under the MIT license.</p>
+    </div>
+
+
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+    <script type="text/javascript" src="../js/uni-form-validation.jquery.js" charset="utf-8"></script>
+    <script>
+      $(function(){
+        $('form.uniForm').uniform();
+      });
+
+
+      /**
+       * A somewhat contrived example of a custom callback
+       * 
+       * This will check for a letter + number code in the field
+       * of length 2
+       * 
+       * Trigger this by giving the form element two classnames, 
+       *  validateCallback name_of_the_custom_function
+       *
+       * Make sure that the function is put into the window object.
+       *
+       * @param object field   jQuery object for the input field
+       * @param string caption title of the field
+       *
+       * return mixed string on error, bool true on success
+       */
+      window.my_code_callback = function(field, caption) {
+        if (2 != field.val().length) {
+          return caption + ' must be two characters long';
+        }
+
+        if (/^[a-zA-Z]/.test(field.val())
+            && /[0-9]$/.test(field.val())
+        ){
+          return true;
+        }
+        return caption + ' must be in format of "A5" [Letter + Number]';
+      }
+    </script>
+  </body>
+</html>
diff --git a/js/uni-form-validation.jquery.js b/js/uni-form-validation.jquery.js
@@ -598,7 +598,7 @@ jQuery.fn.uniform = function(extended_settings) {
         form.delegate(settings.field_selector, 'blur', function() {
             var $input = $(this);
             var label  = $(this)
-                .closest('div.'+settings.holder_class)
+                .closest('div.' + settings.holder_class)
                 .find('label').text().replace('*','');
 
             // remove focus from form element