From 14d0ac09fe52f1b32f131108d1c393eb7a2056f4 Mon Sep 17 00:00:00 2001 From: jlukic Date: Sat, 14 Sep 2013 13:58:59 -0400 Subject: [PATCH] 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 | 34 ++++++++++++++++--- build/uncompressed/modules/behavior/form.js | 34 ++++++++++++++++--- node/src/documents/modules/form.html | 30 ++++++++++------ node/src/files/javascript/validate-form.js | 4 +-- .../release/minified/modules/behavior/form.js | 34 ++++++++++++++++--- .../uncompressed/modules/behavior/form.js | 34 ++++++++++++++++--- src/modules/behavior/form.js | 34 ++++++++++++++++--- 7 files changed, 167 insertions(+), 37 deletions(-) diff --git a/build/minified/modules/behavior/form.js b/build/minified/modules/behavior/form.js index 694cff3d8..c8c08cada 100644 --- a/build/minified/modules/behavior/form.js +++ b/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, diff --git a/build/uncompressed/modules/behavior/form.js b/build/uncompressed/modules/behavior/form.js index 694cff3d8..c8c08cada 100644 --- a/build/uncompressed/modules/behavior/form.js +++ b/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, diff --git a/node/src/documents/modules/form.html b/node/src/documents/modules/form.html index 37385e7d4..2f3c478ce 100755 --- a/node/src/documents/modules/form.html +++ b/node/src/documents/modules/form.html @@ -29,7 +29,9 @@ type : 'UI Behavior'

Basic Validation

Form validation requires passing in a validation object with the rules required to validate your form.

- +
+ 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 +
$('.ui.form') .form({ @@ -155,9 +157,6 @@ type : 'UI Behavior'

Custom Validation

Custom form validation requires passing in a validation object with the rules required to validate your form.

-
- 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 -
$('.ui.form') .form({ @@ -193,8 +192,17 @@ type : 'UI Behavior'
-

Inline Validation

-

Validation messages can also appear inline. UI Forms automatically format labels with the className prompt. These validation prompts are also set to appear on input change instead of form submission.

+

Inline Validation and Validation On

+

Validation messages can also appear inline. UI Forms automatically format labels with the class name prompt. These validation prompts are also set to appear on input change instead of form submission.

+

This example also uses a different validation event. Each element will be validated on input blur instead of the default form submit.

+
+ $('.ui.dropdown') + .form({ + inline : true, + on : 'blur' + }) + ; +

Let's go ahead and get you signed up.

@@ -247,13 +255,13 @@ type : 'UI Behavior' on - click - Event used to trigger validation. Can be either submit or change + submit + Event used to trigger validation. Can be either submit, blur or change. - inlineError + inline false - Adds prompt text from template on validation error + Adds inline error on field validation error transition @@ -273,6 +281,7 @@ type : 'UI Behavior'

Validation Rules
Validation rules are a set of conditions required to validate a field
+
Validation rules are found in settings.rules

@@ -366,6 +375,7 @@ type : 'UI Behavior' Templates
Templates are used to construct elements
+
Templates are found in settings.template
diff --git a/node/src/files/javascript/validate-form.js b/node/src/files/javascript/validate-form.js index d211e9457..8ed6be433 100755 --- a/node/src/files/javascript/validate-form.js +++ b/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' }) ; diff --git a/node/src/files/release/minified/modules/behavior/form.js b/node/src/files/release/minified/modules/behavior/form.js index 694cff3d8..c8c08cada 100644 --- a/node/src/files/release/minified/modules/behavior/form.js +++ b/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, diff --git a/node/src/files/release/uncompressed/modules/behavior/form.js b/node/src/files/release/uncompressed/modules/behavior/form.js index 694cff3d8..c8c08cada 100644 --- a/node/src/files/release/uncompressed/modules/behavior/form.js +++ b/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, diff --git a/src/modules/behavior/form.js b/src/modules/behavior/form.js index 694cff3d8..c8c08cada 100755 --- a/src/modules/behavior/form.js +++ b/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,
Template