Adds form validation on all errors on input change regardless of on setting. Fixes #5

Former-commit-id: d5b82c1a514eec77b8278d3174d9a73a36a30a3b
Former-commit-id: 478fb62a7aa91d5ac11808b52a784c60e69d4aad

build/minified/modules/behavior/form.js

@@ -68,11 +68,14 @@ $.fn.form = function(fields, parameters) {
             .on('submit' + eventNamespace, module.validate.form)
           ;
           $field
-            .on('blur' + eventNamespace, module.event.field.change)
+            .on('blur' + eventNamespace, module.event.field.blur)
           ;
           $submit
             .on('click' + eventNamespace, module.submit)
           ;
+          $field
+            .on(module.get.changeEvent() + eventNamespace, module.event.field.change)
+          ;
           module.instantiate();
         },
 
@@ -138,6 +141,19 @@ $.fn.form = function(fields, parameters) {
               $submit.removeClass(className.down);
               module.submit();
             },
+            blur: function() {
+              var
+                $field      = $(this),
+                $fieldGroup = $field.closest($group)
+              ;
+              if( $fieldGroup.hasClass(className.error) ) {
+                module.debug('Revalidating field', $field,  module.get.validation($field));
+                module.validate.field( module.get.validation($field) );
+              }
+              else if(settings.on == 'blur' || settings.on == 'change') {
+                module.validate.field( module.get.validation($field) );
+              }
+            },
             change: function() {
               var
                 $field      = $(this),
@@ -156,6 +172,14 @@ $.fn.form = function(fields, parameters) {
         },
 
         get: {
+          changeEvent: function() {
+            return (document.createElement('input').oninput !== undefined)
+              ? 'input'
+              : (document.createElement('input').onpropertychange !== undefined)
+                ? 'propertychange'
+                : 'keyup'
+            ;
+          },
           field: function(identifier) {
             module.verbose('Finding field with identifier', identifier);
             if( $field.filter('#' + identifier).size() > 0 ) {
@@ -212,7 +236,7 @@ $.fn.form = function(fields, parameters) {
             $fieldGroup
               .addClass(className.error)
             ;
-            if(settings.inlineError) {
+            if(settings.inline) {
               if(!promptExists) {
                 $prompt = settings.templates.prompt(errors);
                 $prompt
@@ -254,7 +278,7 @@ $.fn.form = function(fields, parameters) {
             $fieldGroup
               .removeClass(className.error)
             ;
-            if(settings.inlineError && $prompt.is(':visible')) {
+            if(settings.inline && $prompt.is(':visible')) {
               module.verbose('Removing prompt for field', field);
               if(settings.transition && $.fn.transition !== undefined) {
                 $prompt.transition(settings.transition + ' out', settings.duration, function() {
@@ -296,7 +320,7 @@ $.fn.form = function(fields, parameters) {
             else {
               module.debug('Form has errors');
               $module.addClass(className.error);
-              if(!settings.inlineError) {
+              if(!settings.inline) {
                 module.add.errors(formErrors);
               }
               return $.proxy(settings.onFailure, this)(formErrors);
@@ -558,7 +582,7 @@ $.fn.form.settings = {
 
   keyboardShortcuts : true,
   on                : 'submit',
-  inlineError       : false,
+  inline            : false,
 
   transition        : 'scale',
   duration          : 150,

build/uncompressed/modules/behavior/form.js

@@ -68,11 +68,14 @@ $.fn.form = function(fields, parameters) {
             .on('submit' + eventNamespace, module.validate.form)
           ;
           $field
-            .on('blur' + eventNamespace, module.event.field.change)
+            .on('blur' + eventNamespace, module.event.field.blur)
           ;
           $submit
             .on('click' + eventNamespace, module.submit)
           ;
+          $field
+            .on(module.get.changeEvent() + eventNamespace, module.event.field.change)
+          ;
           module.instantiate();
         },
 
@@ -138,6 +141,19 @@ $.fn.form = function(fields, parameters) {
               $submit.removeClass(className.down);
               module.submit();
             },
+            blur: function() {
+              var
+                $field      = $(this),
+                $fieldGroup = $field.closest($group)
+              ;
+              if( $fieldGroup.hasClass(className.error) ) {
+                module.debug('Revalidating field', $field,  module.get.validation($field));
+                module.validate.field( module.get.validation($field) );
+              }
+              else if(settings.on == 'blur' || settings.on == 'change') {
+                module.validate.field( module.get.validation($field) );
+              }
+            },
             change: function() {
               var
                 $field      = $(this),
@@ -156,6 +172,14 @@ $.fn.form = function(fields, parameters) {
         },
 
         get: {
+          changeEvent: function() {
+            return (document.createElement('input').oninput !== undefined)
+              ? 'input'
+              : (document.createElement('input').onpropertychange !== undefined)
+                ? 'propertychange'
+                : 'keyup'
+            ;
+          },
           field: function(identifier) {
             module.verbose('Finding field with identifier', identifier);
             if( $field.filter('#' + identifier).size() > 0 ) {
@@ -212,7 +236,7 @@ $.fn.form = function(fields, parameters) {
             $fieldGroup
               .addClass(className.error)
             ;
-            if(settings.inlineError) {
+            if(settings.inline) {
               if(!promptExists) {
                 $prompt = settings.templates.prompt(errors);
                 $prompt
@@ -254,7 +278,7 @@ $.fn.form = function(fields, parameters) {
             $fieldGroup
               .removeClass(className.error)
             ;
-            if(settings.inlineError && $prompt.is(':visible')) {
+            if(settings.inline && $prompt.is(':visible')) {
               module.verbose('Removing prompt for field', field);
               if(settings.transition && $.fn.transition !== undefined) {
                 $prompt.transition(settings.transition + ' out', settings.duration, function() {
@@ -296,7 +320,7 @@ $.fn.form = function(fields, parameters) {
             else {
               module.debug('Form has errors');
               $module.addClass(className.error);
-              if(!settings.inlineError) {
+              if(!settings.inline) {
                 module.add.errors(formErrors);
               }
               return $.proxy(settings.onFailure, this)(formErrors);
@@ -558,7 +582,7 @@ $.fn.form.settings = {
 
   keyboardShortcuts : true,
   on                : 'submit',
-  inlineError       : false,
+  inline            : false,
 
   transition        : 'scale',
   duration          : 150,

node/src/documents/modules/form.html

@@ -29,7 +29,9 @@ type   : 'UI Behavior'
   <div class="example">
     <h3 class="ui header">Basic Validation</h3>
     <p>Form validation requires passing in a validation object with the rules required to validate your form.</p>
-    <!-- <div class="ui green message">If no validation object is specified then the form will validate against the default validation set up for the plugin. See <em>default validation</em> below.</div> -->
+    <div class="ui info message">
+      <i class="help icon"></i>A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation
+    </div>
     <div class="ignore code">
     $('.ui.form')
       .form({
@@ -155,9 +157,6 @@ type   : 'UI Behavior'
   <div class="dog example">
     <h3 class="ui header">Custom Validation</h3>
     <p>Custom form validation requires passing in a validation object with the rules required to validate your form.</p>
-    <div class="ui info message">
-      <i class="help icon"></i>A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation
-    </div>
     <div class="ignore code">
     $('.ui.form')
       .form({
@@ -193,8 +192,17 @@ type   : 'UI Behavior'
   </div>
 
   <div class="inline example">
-    <h3 class="ui header">Inline Validation</h3>
-    <p>Validation messages can also appear inline. UI Forms automatically format <a href="/elements/label.html">labels</a> with the className prompt. These validation prompts are also set to appear on input change instead of form submission.</p>
+    <h3 class="ui header">Inline Validation and Validation On</h3>
+    <p>Validation messages can also appear inline. UI Forms automatically format <a href="/elements/label.html">labels</a> with the class name <code>prompt</code>. These validation prompts are also set to appear on input change instead of form submission.</p>
+    <p>This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.</p>
+    <div class="code" data-type="javascript">
+      $('.ui.dropdown')
+        .form({
+          inline : true,
+          on     : 'blur'
+        })
+      ;
+    </div>
     <div class="ui form segment">
       <p>Let's go ahead and get you signed up.</p>
       <div class="two fields">
@@ -247,13 +255,13 @@ type   : 'UI Behavior'
       </tr>
       <tr>
         <td>on</td>
-        <td>click</td>
-        <td>Event used to trigger validation. Can be either submit or change</td>
+        <td>submit</td>
+        <td>Event used to trigger validation. Can be either submit, blur or change.</td>
       </tr>
       <tr>
-        <td>inlineError</td>
+        <td>inline</td>
         <td>false</td>
-        <td>Adds prompt text from template on validation error</td>
+        <td>Adds inline error on field validation error</td>
       </tr>
       <tr>
         <td>transition</td>
@@ -273,6 +281,7 @@ type   : 'UI Behavior'
   <h3 class="ui header">
     Validation Rules
     <div class="sub header">Validation rules are a set of conditions required to validate a field</div>
+    <div class="ui info segment">Validation rules are found in <code>settings.rules</code></div>
   </h3>
   <table class="ui teal celled definition table segment">
     <thead>
@@ -366,6 +375,7 @@ type   : 'UI Behavior'
     Templates
     <div class="sub header">Templates are used to construct elements</div>
   </h3>
+  <div class="ui info segment">Templates are found in <code>settings.template</code></div>
   <table class="ui  celled definition table segment">
     <thead>
       <th class="four wide">Template</th>

node/src/files/javascript/validate-form.js

@@ -103,8 +103,8 @@ semantic.validateForm.ready = function() {
 
   $inlineForm
     .form({}, {
-      on: 'change',
-      inlineError: true
+      inline : true,
+      on: 'blur'
     })
   ;
 

node/src/files/release/minified/modules/behavior/form.js

@@ -68,11 +68,14 @@ $.fn.form = function(fields, parameters) {
             .on('submit' + eventNamespace, module.validate.form)
           ;
           $field
-            .on('blur' + eventNamespace, module.event.field.change)
+            .on('blur' + eventNamespace, module.event.field.blur)
           ;
           $submit
             .on('click' + eventNamespace, module.submit)
           ;
+          $field
+            .on(module.get.changeEvent() + eventNamespace, module.event.field.change)
+          ;
           module.instantiate();
         },
 
@@ -138,6 +141,19 @@ $.fn.form = function(fields, parameters) {
               $submit.removeClass(className.down);
               module.submit();
             },
+            blur: function() {
+              var
+                $field      = $(this),
+                $fieldGroup = $field.closest($group)
+              ;
+              if( $fieldGroup.hasClass(className.error) ) {
+                module.debug('Revalidating field', $field,  module.get.validation($field));
+                module.validate.field( module.get.validation($field) );
+              }
+              else if(settings.on == 'blur' || settings.on == 'change') {
+                module.validate.field( module.get.validation($field) );
+              }
+            },
             change: function() {
               var
                 $field      = $(this),
@@ -156,6 +172,14 @@ $.fn.form = function(fields, parameters) {
         },
 
         get: {
+          changeEvent: function() {
+            return (document.createElement('input').oninput !== undefined)
+              ? 'input'
+              : (document.createElement('input').onpropertychange !== undefined)
+                ? 'propertychange'
+                : 'keyup'
+            ;
+          },
           field: function(identifier) {
             module.verbose('Finding field with identifier', identifier);
             if( $field.filter('#' + identifier).size() > 0 ) {
@@ -212,7 +236,7 @@ $.fn.form = function(fields, parameters) {
             $fieldGroup
               .addClass(className.error)
             ;
-            if(settings.inlineError) {
+            if(settings.inline) {
               if(!promptExists) {
                 $prompt = settings.templates.prompt(errors);
                 $prompt
@@ -254,7 +278,7 @@ $.fn.form = function(fields, parameters) {
             $fieldGroup
               .removeClass(className.error)
             ;
-            if(settings.inlineError && $prompt.is(':visible')) {
+            if(settings.inline && $prompt.is(':visible')) {
               module.verbose('Removing prompt for field', field);
               if(settings.transition && $.fn.transition !== undefined) {
                 $prompt.transition(settings.transition + ' out', settings.duration, function() {
@@ -296,7 +320,7 @@ $.fn.form = function(fields, parameters) {
             else {
               module.debug('Form has errors');
               $module.addClass(className.error);
-              if(!settings.inlineError) {
+              if(!settings.inline) {
                 module.add.errors(formErrors);
               }
               return $.proxy(settings.onFailure, this)(formErrors);
@@ -558,7 +582,7 @@ $.fn.form.settings = {
 
   keyboardShortcuts : true,
   on                : 'submit',
-  inlineError       : false,
+  inline            : false,
 
   transition        : 'scale',
   duration          : 150,

node/src/files/release/uncompressed/modules/behavior/form.js

@@ -68,11 +68,14 @@ $.fn.form = function(fields, parameters) {
             .on('submit' + eventNamespace, module.validate.form)
           ;
           $field
-            .on('blur' + eventNamespace, module.event.field.change)
+            .on('blur' + eventNamespace, module.event.field.blur)
           ;
           $submit
             .on('click' + eventNamespace, module.submit)
           ;
+          $field
+            .on(module.get.changeEvent() + eventNamespace, module.event.field.change)
+          ;
           module.instantiate();
         },
 
@@ -138,6 +141,19 @@ $.fn.form = function(fields, parameters) {
               $submit.removeClass(className.down);
               module.submit();
             },
+            blur: function() {
+              var
+                $field      = $(this),
+                $fieldGroup = $field.closest($group)
+              ;
+              if( $fieldGroup.hasClass(className.error) ) {
+                module.debug('Revalidating field', $field,  module.get.validation($field));
+                module.validate.field( module.get.validation($field) );
+              }
+              else if(settings.on == 'blur' || settings.on == 'change') {
+                module.validate.field( module.get.validation($field) );
+              }
+            },
             change: function() {
               var
                 $field      = $(this),
@@ -156,6 +172,14 @@ $.fn.form = function(fields, parameters) {
         },
 
         get: {
+          changeEvent: function() {
+            return (document.createElement('input').oninput !== undefined)
+              ? 'input'
+              : (document.createElement('input').onpropertychange !== undefined)
+                ? 'propertychange'
+                : 'keyup'
+            ;
+          },
           field: function(identifier) {
             module.verbose('Finding field with identifier', identifier);
             if( $field.filter('#' + identifier).size() > 0 ) {
@@ -212,7 +236,7 @@ $.fn.form = function(fields, parameters) {
             $fieldGroup
               .addClass(className.error)
             ;
-            if(settings.inlineError) {
+            if(settings.inline) {
               if(!promptExists) {
                 $prompt = settings.templates.prompt(errors);
                 $prompt
@@ -254,7 +278,7 @@ $.fn.form = function(fields, parameters) {
             $fieldGroup
               .removeClass(className.error)
             ;
-            if(settings.inlineError && $prompt.is(':visible')) {
+            if(settings.inline && $prompt.is(':visible')) {
               module.verbose('Removing prompt for field', field);
               if(settings.transition && $.fn.transition !== undefined) {
                 $prompt.transition(settings.transition + ' out', settings.duration, function() {
@@ -296,7 +320,7 @@ $.fn.form = function(fields, parameters) {
             else {
               module.debug('Form has errors');
               $module.addClass(className.error);
-              if(!settings.inlineError) {
+              if(!settings.inline) {
                 module.add.errors(formErrors);
               }
               return $.proxy(settings.onFailure, this)(formErrors);
@@ -558,7 +582,7 @@ $.fn.form.settings = {
 
   keyboardShortcuts : true,
   on                : 'submit',
-  inlineError       : false,
+  inline            : false,
 
   transition        : 'scale',
   duration          : 150,

src/modules/behavior/form.js

@@ -68,11 +68,14 @@ $.fn.form = function(fields, parameters) {
             .on('submit' + eventNamespace, module.validate.form)
           ;
           $field
-            .on('blur' + eventNamespace, module.event.field.change)
+            .on('blur' + eventNamespace, module.event.field.blur)
           ;
           $submit
             .on('click' + eventNamespace, module.submit)
           ;
+          $field
+            .on(module.get.changeEvent() + eventNamespace, module.event.field.change)
+          ;
           module.instantiate();
         },
 
@@ -138,6 +141,19 @@ $.fn.form = function(fields, parameters) {
               $submit.removeClass(className.down);
               module.submit();
             },
+            blur: function() {
+              var
+                $field      = $(this),
+                $fieldGroup = $field.closest($group)
+              ;
+              if( $fieldGroup.hasClass(className.error) ) {
+                module.debug('Revalidating field', $field,  module.get.validation($field));
+                module.validate.field( module.get.validation($field) );
+              }
+              else if(settings.on == 'blur' || settings.on == 'change') {
+                module.validate.field( module.get.validation($field) );
+              }
+            },
             change: function() {
               var
                 $field      = $(this),
@@ -156,6 +172,14 @@ $.fn.form = function(fields, parameters) {
         },
 
         get: {
+          changeEvent: function() {
+            return (document.createElement('input').oninput !== undefined)
+              ? 'input'
+              : (document.createElement('input').onpropertychange !== undefined)
+                ? 'propertychange'
+                : 'keyup'
+            ;
+          },
           field: function(identifier) {
             module.verbose('Finding field with identifier', identifier);
             if( $field.filter('#' + identifier).size() > 0 ) {
@@ -212,7 +236,7 @@ $.fn.form = function(fields, parameters) {
             $fieldGroup
               .addClass(className.error)
             ;
-            if(settings.inlineError) {
+            if(settings.inline) {
               if(!promptExists) {
                 $prompt = settings.templates.prompt(errors);
                 $prompt
@@ -254,7 +278,7 @@ $.fn.form = function(fields, parameters) {
             $fieldGroup
               .removeClass(className.error)
             ;
-            if(settings.inlineError && $prompt.is(':visible')) {
+            if(settings.inline && $prompt.is(':visible')) {
               module.verbose('Removing prompt for field', field);
               if(settings.transition && $.fn.transition !== undefined) {
                 $prompt.transition(settings.transition + ' out', settings.duration, function() {
@@ -296,7 +320,7 @@ $.fn.form = function(fields, parameters) {
             else {
               module.debug('Form has errors');
               $module.addClass(className.error);
-              if(!settings.inlineError) {
+              if(!settings.inline) {
                 module.add.errors(formErrors);
               }
               return $.proxy(settings.onFailure, this)(formErrors);
@@ -558,7 +582,7 @@ $.fn.form.settings = {
 
   keyboardShortcuts : true,
   on                : 'submit',
-  inlineError       : false,
+  inline            : false,
 
   transition        : 'scale',
   duration          : 150,