Changeset 1370

Timestamp:

02/18/07 18:46:36 (1 year ago)

Author:

joern

Message:

validation alpha 2

Location:

branches/joern-dev/fuzz/validation

Files:

• formPluginIntegration.html (modified) (3 diffs)
• js/validate.js (modified) (20 diffs)
• validateCustomTest.html (modified) (4 diffs)
• validateTest.html (modified) (1 diff)
• validatKeypressTest.html (added)

branches/joern-dev/fuzz/validation/formPluginIntegration.html

@@ -21 +21 @@
         <p>
             <label for="user">Username</label>
-            <input id="user" name="user" title="Please enter your username (at least 3 characters)" class="{minLength:3}" />
+            <input id="user" name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minLength:3}" />
         </p>
         <p>
             <label for="pass">Password</label>
-            <input type="password" name="password" id="password" class="{minLength:5}" />
+            <input type="password" name="password" id="password" class="{required:true,minLength:5}" />
         </p>
         <p>
@@ -48 +48 @@
         });
         
-        // validate the form when it is submitted
-        var options = {
-            debug: true,
+        $.validator.defaults.debug = true;
+        
+        $("#form").validate({
             submitHandler: function(form) {
                 $(form).ajaxSubmit({
@@ -61 +61 @@
                     }
                 });
-            }
-        };
-        var v = $("#form").validate(options);
+            },
+            event: "keyup"
+        });
     });
 </script>

branches/joern-dev/fuzz/validation/js/validate.js

@@ -10 +10 @@
 
 /**
- * Validates either a single form on submit or a list of elements immediately.
+ * Validates either a single form on submit or a list of elements on a user-defined event.
  *
  * The normal behaviour is to validate a form when a submit button is clicked or
  * the user presses enter when an input of that form is focused.
  *
- * It is also possible to validate elements immediately on blur or any other event.
+ * It is also possible to validate each individual element of that form, eg. on blur or keyup.
  *
  * Following are a few aspects that you should know about when using this plugin.
@@ -22 +22 @@
  * Markup recommendations: A good form has labels associated with each input
  * element: The for attribute of the label has the same value as the id of the input.
- *
- * Validation rules: You can specify validation rules via metadata or via plugin
- * settings (option rules). Its more a matter of taste which way you choose.
- * Using metadata is good for fast prototyping.
- *
- * Validation methods: Included are a set of common validation methods, like required.
+ * If IDs aren't provided, they are generated, combining the ID of the containing
+ * form (if any) with the name of the element, with the exception of radio and checkbox
+ * inputs.
+ *
+ * Validation methods: A valiation method decides whether an element is valid.
+ * Included are a set of common validation methods, like required.
  * Except required itself and equalTo, all validation methods declare an element valid
  * when it has no value at all. That way you can specify an element input to
  * contain a valid email adress, or nothing at all. All available methods are documented
  * below, as well as $.validator.addMethod, which you can use to add your own methods.
+ *
+ * Validation rules: A validation rule applies one or more validation methods to an
+ * input element. You can specify validation rules via metadata or via plugin
+ * settings (option rules). It is more a matter of taste which way you choose.
+ * Using metadata is good for fast prototyping. Plugin settings are good for perfect
+ * clean markup. Valid markup results from both approaches.
  * 
- * Error messages: There are three ways to provide error messages. Via the title attribute
- * of the input element to validate, via error labels and via plugin settings
- * (option messages). All included validation rules provide a default error message
- * which you can use for prototyping.
+ * Error messages: An error message displays a hint for the user about invalid
+ * elements, and what is wrong. There are three ways to provide error messages.
+ * Via the title attribute of the input element to validate, via error labels and
+ * via plugin settings (option messages). All included validation rules provide a
+ * default error message which you can use for prototyping, because it is used when
+ * no specific message is provided.
  *
  * Error message display: Error messages are handled via label elements with an
@@ -43 +51 @@
  * after the invalid element. It is also possible to put them into an error container
  * (option errorContainer), even a container containing a general warning followed by
- * the list of errors is possible (option errorContainer together with errorLabelContainer).
+ * a list of errors is possible (option errorContainer together with errorLabelContainer).
  *
  * Focusing of invalid elements: By default, the first invalid element in a form is focused
@@ -54 +62 @@
  * Form submit: By default, the form submission is prevented when the form is invalid,
  * and submitted as normal when it is valid. You can also handle the submission
- * (option submitHandler) manually.
+ * manually (option submitHandler).
+ *
+ * Validation event: By default, forms are validated on submit, triggered by the user clicking
+ * the submit button or pressing enter when a form input is focused. Instead, each element can
+ * be validated on a certain event like blur or keyup (option event).
  *
  * Developing and debugging a form: While developing and debugging the form, you should set
@@ -62 +74 @@
  * your rules all accept empty elements as valid (like email or url methods).
  *
- * Validation multiple forms on one page: The plugin can handle only one form per call. In case
+ * Validating multiple forms on one page: The plugin can handle only one form per call. In case
  * you have multiple forms on a single page which you want to validate, you can avoid having
- * to duplicate the plugin settings by modifying the defaults via $.validator.defaults.
- *
- * Validator object: The validation plugin returns the instance of the validator object it uses.
+ * to duplicate the plugin settings by modifying the defaults via $.validator.defaults. Use
+ * $.extend($.validator.defaults, {...}) to override multiple settings at once.
+ *
+ * Validator object: The validation plugin method returns the instance of the validator object it uses.
  * That gives you full control over every aspect of the validation. Let me know if you come up
  * with something that I didn't have in mind. Thats why the plugin has nearly no private methods.
@@ -76 +89 @@
  * @desc Validates a form on submit. Rules are read from metadata.
  *
- * @example $("input").blur(function() {
- *   $(this).validate({
- *     focusInvalid: false
- *   });
+ * @example $("input").validate({
+ *      focusInvalid: false,
+ *      event: blur
  * });
  * @desc Validates all input elements on blur event (when the element looses focus).
@@ -197 +209 @@
  *      blur or keypress, each element is validated on that event. Default: submit,
  *      validates the entire form on submit
+ * @option Boolean onsubmit Validate the form on submit. Set to false to use only other
+ *      events for validation (option event). Default: true
  * @option String metaWrapper In case you use metadata for other plugins, too, you
  *      want to wrap your validation rules
@@ -210 +224 @@
 $.fn.validate = function(options) {
     var validator = new $.validator(options, this);
-    if( !validator.settings.event ) {
+    if( validator.settings.onsubmit ) {
         // validate the form on submit
         this.submit(function(event) {
@@ -219 +233 @@
             return validator.validateForm();
         });
-    } else {
+    }
+    if( validator.settings.event ) {
         // validate all elements on some other event like blur or keypress
         validator.elements[validator.settings.event](function() {
@@ -243 +258 @@
     this.currentForm = form[0];
     // find the element to look for error labels
-    this.errorContext = settings.errorLabelContainer.length && settings.errorLabelContainer
+    this.errorContainer = settings.errorLabelContainer.length && settings.errorLabelContainer
         || settings.errorContainer.length && settings.errorContainer
-        || this.currentForm;
+        || $([])
+    this.errorContext = this.errorContainer.length && this.errorContainer || form;
     
     // listen for focus events to save reference to last focused element
@@ -267 +283 @@
     focusInvalid: true,
     errorContainer: $([]),
-    errorLabelContainer: $([])
+    errorLabelContainer: $([]),
+    onsubmit: true
 };
 
@@ -323 +340 @@
                     }
                     var list = this.errorList[id] || (this.errorList[id] = []);
-                    list[list.length] = method.message && this.formatMessage(method.message, rule.parameters);
+                    list[list.length] = method.message && this.formatMessage(method.message, rule, id);
                 }
             } catch(e) {
@@ -345 +362 @@
      * @param Array<Object>|Object param
      */
-    formatMessage: function(message, param) {
-        var first = param.constructor == Array ? param[0] : param;
+    formatMessage: function(message, rule, id) {
+        var m = this.settings.messages,
+            param = rule.parameters,
+            first = param.constructor == Array ? param[0] : param;
+        if(m && m[id]) {
+            if(m[id].constructor == String)
+                message = m[id];
+            else
+                message = m[id][rule.name];
+        }
         return message.replace("{0}", first || "").replace("{1}", param[1] || "");
     },
@@ -384 +409 @@
                 return false;
             }
-            if(this.settings.debug && window.console)
-                console.log("form is valid (or rules have errors)")
             return true;
         }
@@ -431 +454 @@
      */
     showError: function(elementID, message) {
-        var element = $("#" + elementID).addClass(this.settings.errorClass);
-    
-        // find message for this label
-        var m = this.settings.messages;
-        var message = (m && m[elementID]) || element.attr('title') || message || "<strong>Warning: No message defined for " + elementID + "</strong>";
-        
-        var errorLabel = $("label." + this.settings.errorClass, this.errorContext)
-            .filter("[@for=" + elementID + "]");
-        var w = this.settings.errorWrapper;
+        var element = $("#" + elementID).addClass(this.settings.errorClass),
+            // find message for this label
+            message = element.attr('title') || message || "<strong>Warning: No message defined for " + elementID + "</strong>",
+            errorLabel = $("label." + this.settings.errorClass, this.errorContext).filter("[@for=" + elementID + "]"),
+            wrapper = this.settings.errorWrapper;
         if( errorLabel.length ) {
             // check if we have a generated label, replace the message then
@@ -446 +465 @@
             }
             errorLabel.show();
-            if( w ) {
-                errorLabel.parents(w).show();
+            if(wrapper) {
+                errorLabel.parents(wrapper).show();
             }
         } else {
@@ -454 +473 @@
             // TODO can't change message
             var errorLabel = $("<label>").attr({"for": elementID, generated: true}).addClass("error").html(message);
-            if(w) {
-                errorLabel = errorLabel.show().wrap("<" + w + "></" + w + ">").parent();
+            if(wrapper) {
+                errorLabel = errorLabel.show().wrap("<" + wrapper + "></" + wrapper + ">").parent();
             }
-            if(!this.errorContext.append(errorLabel).length) 
+            if(!this.errorContainer.append(errorLabel).length) 
                 errorLabel.insertAfter(element);
             errorLabel.show();
@@ -473 +492 @@
         } else {
             data = $(element).data();
-            var meta = this.settings.metaWrapper;
-            if(meta)
-                data = data[meta];
+            var metaWrapper = this.settings.metaWrapper;
+            if(metaWrapper)
+                data = data[metaWrapper];
         }
         var rules = [];
         if(!data)
             return rules;
-        $.each(data, function(key) {
+        $.each(data, function(key, value) {
             var rule = rules[rules.length] = {};
             rule.name = key;
-            rule.parameters = this;
+            rule.parameters = value;
         });
         return rules;
@@ -492 +511 @@
         // generate id when none is found
         if(!id) {
-            var formId = element.form.id;
-            var id = element.id = (formId ? formId.replace(/[^a-zA-Z0-9\-_]/g, "") : "") + element.name.replace(/[^a-zA-Z0-9\-_]/g, "");
+            var formId = element.form.id,
+                idcleanup = /[^a-zA-Z0-9\-_]/g;
+            id = element.id = (formId ? formId.replace(idcleanup, "") : "") + element.name.replace(idcleanup, "");
         }
         return id;
@@ -595 +615 @@
             }
         default:
-            return value.length > 0;
+            return $.trim(value).length > 0;
         }
     },

branches/joern-dev/fuzz/validation/validateCustomTest.html

@@ -15 +15 @@
 <body>
 
-<div id="texttests">
+<form action="foo.html" id="texttests">
 
     <h2>Some more tests with text and textarea and validating on blur</h2>
@@ -25 +25 @@
         textarea
         <textarea id="textarea" cols="25" rows="5"
-            title="Please enter a date with at least 3 and max 15 characters! (length and date)"
+            title="Please enter a number with at least 3 and max 15 characters!"
             test="required:true, minLength:3, maxLength:15, number:true"></textarea>
         <br/>
@@ -58 +58 @@
         <label for="family" class="error">Please select your family status.</label>
     </div>
-
-</div>
+    <input type="submit" />
+</form>
 
 <script type="text/javascript">
@@ -81 +81 @@
     $(document).ready(function() {
         $.validator.defaults.debug = true;
-        var options = {
+        
+        $("#texttests").validate({
             // important: combining focus with validation on blur can crash browsers
             focusInvalid: false,
-            event: "blur"
-        };
-        
-        $("#texttests").validate(options);
+            event: "blur",
+            onsbumit: false
+        });
         
     });

branches/joern-dev/fuzz/validation/validateTest.html

@@ -77 +77 @@
     <li><a href="validateRadioTest.html">A very simple test to validate radio buttons</a></li>
     <li><a href="validateCheckboxTest.html">A very simple test to validate checkbox buttons</a></li>
+    <li><a href="validatKeypressTest.html">Validation on keypress and submit</a></li>
     <li><a href="formPluginIntegration.html">Integration with Form Plugin (AJAX submit)</a></li>
 </ul>