From 83142970e92838365708e91bf217c054156fed96 Mon Sep 17 00:00:00 2001 From: jlukic Date: Sat, 14 Sep 2013 13:23:58 -0400 Subject: [PATCH] Updates form validation features and docs Adds complete settings description, swaps error prompts to be loosely coupled with transition component. Former-commit-id: 062a4b961b8dd418440a8477caf1fb0c0b6c6dcd Former-commit-id: ee6ace02e9542602a34fdc8698865a24aee97ea2 --- build/minified/modules/behavior/form.js | 77 ++++--- build/uncompressed/elements/label.css | 16 +- build/uncompressed/modules/behavior/form.js | 77 ++++--- node/src/documents/modules/dropdown.html | 2 +- node/src/documents/modules/form.html | 203 ++++++++++++++++-- node/src/documents/modules/modal.html | 8 +- .../release/minified/modules/behavior/form.js | 77 ++++--- .../release/uncompressed/elements/label.css | 16 +- .../uncompressed/modules/behavior/form.js | 77 ++++--- src/elements/label.less | 21 +- src/modules/behavior/form.js | 77 ++++--- 11 files changed, 475 insertions(+), 176 deletions(-) diff --git a/build/minified/modules/behavior/form.js b/build/minified/modules/behavior/form.js index 967a8a1b3..6f63d30a8 100644 --- a/build/minified/modules/behavior/form.js +++ b/build/minified/modules/behavior/form.js @@ -208,7 +208,7 @@ $.fn.form = function(fields, parameters) { $prompt = $fieldGroup.find(selector.prompt), promptExists = ($prompt.size() !== 0) ; - module.verbose('Adding inline validation prompt'); + module.verbose('Adding inline error', field); $fieldGroup .addClass(className.error) ; @@ -217,16 +217,22 @@ $.fn.form = function(fields, parameters) { $prompt = settings.templates.prompt(errors); $prompt .appendTo($fieldGroup) - .hide() ; } $prompt .html(errors[0]) ; - if($prompt.is(':not(:visible)')) { - $prompt - .fadeIn(settings.animateSpeed) - ; + if(!promptExists) { + if(settings.transition && $.fn.transition !== undefined) { + module.verbose('Displaying error with css transition', settings.transition); + $prompt.transition(settings.transition + ' in', settings.duration); + } + else { + module.verbose('Displaying error with fallback javascript animation'); + $prompt + .fadeIn(settings.duration) + ; + } } } }, @@ -248,8 +254,20 @@ $.fn.form = function(fields, parameters) { $fieldGroup .removeClass(className.error) ; - if(settings.inlineError) { - $prompt.hide(); + if(settings.inlineError && $prompt.is(':visible')) { + module.verbose('Removing prompt for field', field); + if(settings.transition && $.fn.transition !== undefined) { + $prompt.transition(settings.transition + ' out', settings.duration, function() { + $prompt.remove(); + }); + } + else { + $prompt + .fadeOut(settings.duration, function(){ + $prompt.remove(); + }) + ; + } } } }, @@ -530,20 +548,21 @@ $.fn.form = function(fields, parameters) { $.fn.form.settings = { - // module info - name : 'Form', + name : 'Form', + namespace : 'form', debug : true, verbose : true, performance : true, - namespace : 'form', keyboardShortcuts : true, on : 'submit', - animateSpeed : 150, inlineError : false, + transition : 'fade', + duration : 150, + onValid : function() {}, onInvalid : function() {}, @@ -555,19 +574,19 @@ $.fn.form.settings = { }, selector : { - message : '.error.message', - field : 'input, textarea, select', - group : '.field', - input : 'input', - prompt : '.prompt', - submit : '.submit' + message : '.error.message', + field : 'input, textarea, select', + group : '.field', + input : 'input', + prompt : '.prompt', + submit : '.submit' }, className : { - error : 'error', - success: 'success', - down : 'down', - label : 'ui label prompt' + error : 'error', + success : 'success', + down : 'down', + label : 'ui label prompt' }, // errors @@ -624,20 +643,20 @@ $.fn.form.settings = { : false ; }, - match: function(value, matchingField) { + match: function(value, fieldIdentifier) { // use either id or name of field var $form = $(this), matchingValue ; - if($form.find('#' + matchingField).size() > 0) { - matchingValue = $form.find('#' + matchingField).val(); + if($form.find('#' + fieldIdentifier).size() > 0) { + matchingValue = $form.find('#' + fieldIdentifier).val(); } - else if($form.find('[name=' + matchingField +']').size() > 0) { - matchingValue = $form.find('[name=' + matchingField + ']').val(); + else if($form.find('[name=' + fieldIdentifier +']').size() > 0) { + matchingValue = $form.find('[name=' + fieldIdentifier + ']').val(); } - else if( $form.find('[data-validate="'+ matchingField +'"]').size() > 0 ) { - matchingValue = $form.find('[data-validate="'+ matchingField +'"]').val(); + else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').size() > 0 ) { + matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').val(); } return (matchingValue !== undefined) ? ( value.toString() == matchingValue.toString() ) diff --git a/build/uncompressed/elements/label.css b/build/uncompressed/elements/label.css index 47fcbb055..b6a27f69e 100644 --- a/build/uncompressed/elements/label.css +++ b/build/uncompressed/elements/label.css @@ -109,7 +109,7 @@ a.ui.label { States *******************************/ /*------------------- - Disabled + Disabled --------------------*/ .ui.label.disabled { opacity: 0.5; @@ -128,6 +128,20 @@ a.ui.label:hover:before { background-color: #E0E0E0; color: rgba(0, 0, 0, 0.7); } +/*------------------- + Visible +--------------------*/ +.ui.labels.visible .label, +.ui.label.visible { + display: inline-block !important; +} +/*------------------- + Hidden +--------------------*/ +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} /******************************* Variations *******************************/ diff --git a/build/uncompressed/modules/behavior/form.js b/build/uncompressed/modules/behavior/form.js index 967a8a1b3..6f63d30a8 100644 --- a/build/uncompressed/modules/behavior/form.js +++ b/build/uncompressed/modules/behavior/form.js @@ -208,7 +208,7 @@ $.fn.form = function(fields, parameters) { $prompt = $fieldGroup.find(selector.prompt), promptExists = ($prompt.size() !== 0) ; - module.verbose('Adding inline validation prompt'); + module.verbose('Adding inline error', field); $fieldGroup .addClass(className.error) ; @@ -217,16 +217,22 @@ $.fn.form = function(fields, parameters) { $prompt = settings.templates.prompt(errors); $prompt .appendTo($fieldGroup) - .hide() ; } $prompt .html(errors[0]) ; - if($prompt.is(':not(:visible)')) { - $prompt - .fadeIn(settings.animateSpeed) - ; + if(!promptExists) { + if(settings.transition && $.fn.transition !== undefined) { + module.verbose('Displaying error with css transition', settings.transition); + $prompt.transition(settings.transition + ' in', settings.duration); + } + else { + module.verbose('Displaying error with fallback javascript animation'); + $prompt + .fadeIn(settings.duration) + ; + } } } }, @@ -248,8 +254,20 @@ $.fn.form = function(fields, parameters) { $fieldGroup .removeClass(className.error) ; - if(settings.inlineError) { - $prompt.hide(); + if(settings.inlineError && $prompt.is(':visible')) { + module.verbose('Removing prompt for field', field); + if(settings.transition && $.fn.transition !== undefined) { + $prompt.transition(settings.transition + ' out', settings.duration, function() { + $prompt.remove(); + }); + } + else { + $prompt + .fadeOut(settings.duration, function(){ + $prompt.remove(); + }) + ; + } } } }, @@ -530,20 +548,21 @@ $.fn.form = function(fields, parameters) { $.fn.form.settings = { - // module info - name : 'Form', + name : 'Form', + namespace : 'form', debug : true, verbose : true, performance : true, - namespace : 'form', keyboardShortcuts : true, on : 'submit', - animateSpeed : 150, inlineError : false, + transition : 'fade', + duration : 150, + onValid : function() {}, onInvalid : function() {}, @@ -555,19 +574,19 @@ $.fn.form.settings = { }, selector : { - message : '.error.message', - field : 'input, textarea, select', - group : '.field', - input : 'input', - prompt : '.prompt', - submit : '.submit' + message : '.error.message', + field : 'input, textarea, select', + group : '.field', + input : 'input', + prompt : '.prompt', + submit : '.submit' }, className : { - error : 'error', - success: 'success', - down : 'down', - label : 'ui label prompt' + error : 'error', + success : 'success', + down : 'down', + label : 'ui label prompt' }, // errors @@ -624,20 +643,20 @@ $.fn.form.settings = { : false ; }, - match: function(value, matchingField) { + match: function(value, fieldIdentifier) { // use either id or name of field var $form = $(this), matchingValue ; - if($form.find('#' + matchingField).size() > 0) { - matchingValue = $form.find('#' + matchingField).val(); + if($form.find('#' + fieldIdentifier).size() > 0) { + matchingValue = $form.find('#' + fieldIdentifier).val(); } - else if($form.find('[name=' + matchingField +']').size() > 0) { - matchingValue = $form.find('[name=' + matchingField + ']').val(); + else if($form.find('[name=' + fieldIdentifier +']').size() > 0) { + matchingValue = $form.find('[name=' + fieldIdentifier + ']').val(); } - else if( $form.find('[data-validate="'+ matchingField +'"]').size() > 0 ) { - matchingValue = $form.find('[data-validate="'+ matchingField +'"]').val(); + else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').size() > 0 ) { + matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').val(); } return (matchingValue !== undefined) ? ( value.toString() == matchingValue.toString() ) diff --git a/node/src/documents/modules/dropdown.html b/node/src/documents/modules/dropdown.html index 0b1679824..5f0f0fa83 100755 --- a/node/src/documents/modules/dropdown.html +++ b/node/src/documents/modules/dropdown.html @@ -503,7 +503,7 @@ type : 'UI Module' -
+

Callbacks

Callback settings specify a function to occur after a specific behavior.

diff --git a/node/src/documents/modules/form.html b/node/src/documents/modules/form.html index 017490f3c..eccdc26b2 100755 --- a/node/src/documents/modules/form.html +++ b/node/src/documents/modules/form.html @@ -226,12 +226,18 @@ type : 'UI Behavior' -

Settings

+

Settings

-

Defaults

- +

+ Form Settings +
Form settings modify the form validation behavior
+

+ +
- + + + @@ -257,47 +263,208 @@ type : 'UI Behavior'
Form SettingsSettingDefaultDescription
- +

+ Validation Rules +
Validation rules are a set of conditions required to validate a field
+

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameArgumentsDescription
emptyvalueChecks whether a field is empty
emailvalueChecks whether a field is empty
lengthvalueChecks whether a field is longer than a length
notvalue, notValueChecks whether a field is not a value
isvalue, textChecks whether a field matches a value
maxLengthvalueChecks whether a field is less than a max length
matchvalue, fieldIdentifierChecks whether a field matches another field
urlvalueChecks whether a field is a url
+ + +

+ Callbacks +
Callback settings specify a function to occur after a specific behavior.
+

+ + - + + + - + - + - + - +
CallbacksSettingContextDescription
onValidNonefield Callback on each valid field
onInvalidNonefield Callback on each invalid field
onSuccessNoneform Callback if a form is all valid
onFailureNoneform Callback if any form field is invalid
- +
+ +

+ Templates +
Templates are used to construct elements
+

+
+ + + + + + + + + + + + + + + + + +
TemplateArgumentsDescription
errorErrors (Array)Constructs the contents of an error message
promptErrors (Array)Constructs an element to prompt the user to an invalid field
+ + + +

+ DOM Settings +
DOM settings specify how this module should interface with the DOM
+

+ - + + + - + + + + + + + + + + + + + + + + + + + + +
General SettingsSettingDefaultDescription
moduleNamenamespaceformEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector +
+ selector : { + message : '.error.message', + field : 'input, textarea, select', + group : '.field', + input : 'input', + prompt : '.prompt', + submit : '.submit' + } +
+ 		Selectors used to match functionality to DOM
metadata +
+ + metadata : { + validate: 'validate' + }, +
+ 		+ HTML5 metadata attributes +
className +
+ className : { + active : 'active', + placeholder : 'default', + disabled : 'disabled', + visible : 'visible' + } +
+ 		Class names used to attach style to state
+ + +

+ Debug Settings +
Debug settings controls debug output to the console
+

+ + + + + + + + + + - + @@ -307,20 +474,14 @@ type : 'UI Behavior' - + - - - - -
SettingDefaultDescription
name Form Name used in debug logs
debugFalseTrue Provides standard debug output to console
verboseFalseTrue Provides ancillary debug output to console
namespaceformEvent namespace. Makes sure module teardown does not effect other events attached to an element.
errors
errors : { - action : 'You called a form action that was not defined', method : 'The method you called is not defined.' }
diff --git a/node/src/documents/modules/modal.html b/node/src/documents/modules/modal.html index fc852b422..439f3e09f 100755 --- a/node/src/documents/modules/modal.html +++ b/node/src/documents/modules/modal.html @@ -1,4 +1,4 @@ ---- +def layout : 'default' css : 'modal-demo' @@ -26,10 +26,6 @@ type : 'UI Module' --> -
- Definition - -
@@ -116,7 +112,7 @@ type : 'UI Module'

Hide

A modal can hide itself

-
+
$('.test.modal') .modal('hide') ; diff --git a/node/src/files/release/minified/modules/behavior/form.js b/node/src/files/release/minified/modules/behavior/form.js index 967a8a1b3..6f63d30a8 100644 --- a/node/src/files/release/minified/modules/behavior/form.js +++ b/node/src/files/release/minified/modules/behavior/form.js @@ -208,7 +208,7 @@ $.fn.form = function(fields, parameters) { $prompt = $fieldGroup.find(selector.prompt), promptExists = ($prompt.size() !== 0) ; - module.verbose('Adding inline validation prompt'); + module.verbose('Adding inline error', field); $fieldGroup .addClass(className.error) ; @@ -217,16 +217,22 @@ $.fn.form = function(fields, parameters) { $prompt = settings.templates.prompt(errors); $prompt .appendTo($fieldGroup) - .hide() ; } $prompt .html(errors[0]) ; - if($prompt.is(':not(:visible)')) { - $prompt - .fadeIn(settings.animateSpeed) - ; + if(!promptExists) { + if(settings.transition && $.fn.transition !== undefined) { + module.verbose('Displaying error with css transition', settings.transition); + $prompt.transition(settings.transition + ' in', settings.duration); + } + else { + module.verbose('Displaying error with fallback javascript animation'); + $prompt + .fadeIn(settings.duration) + ; + } } } }, @@ -248,8 +254,20 @@ $.fn.form = function(fields, parameters) { $fieldGroup .removeClass(className.error) ; - if(settings.inlineError) { - $prompt.hide(); + if(settings.inlineError && $prompt.is(':visible')) { + module.verbose('Removing prompt for field', field); + if(settings.transition && $.fn.transition !== undefined) { + $prompt.transition(settings.transition + ' out', settings.duration, function() { + $prompt.remove(); + }); + } + else { + $prompt + .fadeOut(settings.duration, function(){ + $prompt.remove(); + }) + ; + } } } }, @@ -530,20 +548,21 @@ $.fn.form = function(fields, parameters) { $.fn.form.settings = { - // module info - name : 'Form', + name : 'Form', + namespace : 'form', debug : true, verbose : true, performance : true, - namespace : 'form', keyboardShortcuts : true, on : 'submit', - animateSpeed : 150, inlineError : false, + transition : 'fade', + duration : 150, + onValid : function() {}, onInvalid : function() {}, @@ -555,19 +574,19 @@ $.fn.form.settings = { }, selector : { - message : '.error.message', - field : 'input, textarea, select', - group : '.field', - input : 'input', - prompt : '.prompt', - submit : '.submit' + message : '.error.message', + field : 'input, textarea, select', + group : '.field', + input : 'input', + prompt : '.prompt', + submit : '.submit' }, className : { - error : 'error', - success: 'success', - down : 'down', - label : 'ui label prompt' + error : 'error', + success : 'success', + down : 'down', + label : 'ui label prompt' }, // errors @@ -624,20 +643,20 @@ $.fn.form.settings = { : false ; }, - match: function(value, matchingField) { + match: function(value, fieldIdentifier) { // use either id or name of field var $form = $(this), matchingValue ; - if($form.find('#' + matchingField).size() > 0) { - matchingValue = $form.find('#' + matchingField).val(); + if($form.find('#' + fieldIdentifier).size() > 0) { + matchingValue = $form.find('#' + fieldIdentifier).val(); } - else if($form.find('[name=' + matchingField +']').size() > 0) { - matchingValue = $form.find('[name=' + matchingField + ']').val(); + else if($form.find('[name=' + fieldIdentifier +']').size() > 0) { + matchingValue = $form.find('[name=' + fieldIdentifier + ']').val(); } - else if( $form.find('[data-validate="'+ matchingField +'"]').size() > 0 ) { - matchingValue = $form.find('[data-validate="'+ matchingField +'"]').val(); + else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').size() > 0 ) { + matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').val(); } return (matchingValue !== undefined) ? ( value.toString() == matchingValue.toString() ) diff --git a/node/src/files/release/uncompressed/elements/label.css b/node/src/files/release/uncompressed/elements/label.css index 47fcbb055..b6a27f69e 100644 --- a/node/src/files/release/uncompressed/elements/label.css +++ b/node/src/files/release/uncompressed/elements/label.css @@ -109,7 +109,7 @@ a.ui.label { States *******************************/ /*------------------- - Disabled + Disabled --------------------*/ .ui.label.disabled { opacity: 0.5; @@ -128,6 +128,20 @@ a.ui.label:hover:before { background-color: #E0E0E0; color: rgba(0, 0, 0, 0.7); } +/*------------------- + Visible +--------------------*/ +.ui.labels.visible .label, +.ui.label.visible { + display: inline-block !important; +} +/*------------------- + Hidden +--------------------*/ +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} /******************************* Variations *******************************/ diff --git a/node/src/files/release/uncompressed/modules/behavior/form.js b/node/src/files/release/uncompressed/modules/behavior/form.js index 967a8a1b3..6f63d30a8 100644 --- a/node/src/files/release/uncompressed/modules/behavior/form.js +++ b/node/src/files/release/uncompressed/modules/behavior/form.js @@ -208,7 +208,7 @@ $.fn.form = function(fields, parameters) { $prompt = $fieldGroup.find(selector.prompt), promptExists = ($prompt.size() !== 0) ; - module.verbose('Adding inline validation prompt'); + module.verbose('Adding inline error', field); $fieldGroup .addClass(className.error) ; @@ -217,16 +217,22 @@ $.fn.form = function(fields, parameters) { $prompt = settings.templates.prompt(errors); $prompt .appendTo($fieldGroup) - .hide() ; } $prompt .html(errors[0]) ; - if($prompt.is(':not(:visible)')) { - $prompt - .fadeIn(settings.animateSpeed) - ; + if(!promptExists) { + if(settings.transition && $.fn.transition !== undefined) { + module.verbose('Displaying error with css transition', settings.transition); + $prompt.transition(settings.transition + ' in', settings.duration); + } + else { + module.verbose('Displaying error with fallback javascript animation'); + $prompt + .fadeIn(settings.duration) + ; + } } } }, @@ -248,8 +254,20 @@ $.fn.form = function(fields, parameters) { $fieldGroup .removeClass(className.error) ; - if(settings.inlineError) { - $prompt.hide(); + if(settings.inlineError && $prompt.is(':visible')) { + module.verbose('Removing prompt for field', field); + if(settings.transition && $.fn.transition !== undefined) { + $prompt.transition(settings.transition + ' out', settings.duration, function() { + $prompt.remove(); + }); + } + else { + $prompt + .fadeOut(settings.duration, function(){ + $prompt.remove(); + }) + ; + } } } }, @@ -530,20 +548,21 @@ $.fn.form = function(fields, parameters) { $.fn.form.settings = { - // module info - name : 'Form', + name : 'Form', + namespace : 'form', debug : true, verbose : true, performance : true, - namespace : 'form', keyboardShortcuts : true, on : 'submit', - animateSpeed : 150, inlineError : false, + transition : 'fade', + duration : 150, + onValid : function() {}, onInvalid : function() {}, @@ -555,19 +574,19 @@ $.fn.form.settings = { }, selector : { - message : '.error.message', - field : 'input, textarea, select', - group : '.field', - input : 'input', - prompt : '.prompt', - submit : '.submit' + message : '.error.message', + field : 'input, textarea, select', + group : '.field', + input : 'input', + prompt : '.prompt', + submit : '.submit' }, className : { - error : 'error', - success: 'success', - down : 'down', - label : 'ui label prompt' + error : 'error', + success : 'success', + down : 'down', + label : 'ui label prompt' }, // errors @@ -624,20 +643,20 @@ $.fn.form.settings = { : false ; }, - match: function(value, matchingField) { + match: function(value, fieldIdentifier) { // use either id or name of field var $form = $(this), matchingValue ; - if($form.find('#' + matchingField).size() > 0) { - matchingValue = $form.find('#' + matchingField).val(); + if($form.find('#' + fieldIdentifier).size() > 0) { + matchingValue = $form.find('#' + fieldIdentifier).val(); } - else if($form.find('[name=' + matchingField +']').size() > 0) { - matchingValue = $form.find('[name=' + matchingField + ']').val(); + else if($form.find('[name=' + fieldIdentifier +']').size() > 0) { + matchingValue = $form.find('[name=' + fieldIdentifier + ']').val(); } - else if( $form.find('[data-validate="'+ matchingField +'"]').size() > 0 ) { - matchingValue = $form.find('[data-validate="'+ matchingField +'"]').val(); + else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').size() > 0 ) { + matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').val(); } return (matchingValue !== undefined) ? ( value.toString() == matchingValue.toString() ) diff --git a/src/elements/label.less b/src/elements/label.less index 870fa8276..55f9b5bd7 100755 --- a/src/elements/label.less +++ b/src/elements/label.less @@ -143,7 +143,7 @@ a.ui.label { *******************************/ /*------------------- - Disabled + Disabled --------------------*/ .ui.label.disabled { @@ -167,6 +167,25 @@ a.ui.label:hover:before { color: rgba(0, 0, 0, 0.7); } +/*------------------- + Visible +--------------------*/ + +.ui.labels.visible .label, +.ui.label.visible { + display: inline-block !important; +} + +/*------------------- + Hidden +--------------------*/ + +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} + + /******************************* Variations diff --git a/src/modules/behavior/form.js b/src/modules/behavior/form.js index 967a8a1b3..6f63d30a8 100755 --- a/src/modules/behavior/form.js +++ b/src/modules/behavior/form.js @@ -208,7 +208,7 @@ $.fn.form = function(fields, parameters) { $prompt = $fieldGroup.find(selector.prompt), promptExists = ($prompt.size() !== 0) ; - module.verbose('Adding inline validation prompt'); + module.verbose('Adding inline error', field); $fieldGroup .addClass(className.error) ; @@ -217,16 +217,22 @@ $.fn.form = function(fields, parameters) { $prompt = settings.templates.prompt(errors); $prompt .appendTo($fieldGroup) - .hide() ; } $prompt .html(errors[0]) ; - if($prompt.is(':not(:visible)')) { - $prompt - .fadeIn(settings.animateSpeed) - ; + if(!promptExists) { + if(settings.transition && $.fn.transition !== undefined) { + module.verbose('Displaying error with css transition', settings.transition); + $prompt.transition(settings.transition + ' in', settings.duration); + } + else { + module.verbose('Displaying error with fallback javascript animation'); + $prompt + .fadeIn(settings.duration) + ; + } } } }, @@ -248,8 +254,20 @@ $.fn.form = function(fields, parameters) { $fieldGroup .removeClass(className.error) ; - if(settings.inlineError) { - $prompt.hide(); + if(settings.inlineError && $prompt.is(':visible')) { + module.verbose('Removing prompt for field', field); + if(settings.transition && $.fn.transition !== undefined) { + $prompt.transition(settings.transition + ' out', settings.duration, function() { + $prompt.remove(); + }); + } + else { + $prompt + .fadeOut(settings.duration, function(){ + $prompt.remove(); + }) + ; + } } } }, @@ -530,20 +548,21 @@ $.fn.form = function(fields, parameters) { $.fn.form.settings = { - // module info - name : 'Form', + name : 'Form', + namespace : 'form', debug : true, verbose : true, performance : true, - namespace : 'form', keyboardShortcuts : true, on : 'submit', - animateSpeed : 150, inlineError : false, + transition : 'fade', + duration : 150, + onValid : function() {}, onInvalid : function() {}, @@ -555,19 +574,19 @@ $.fn.form.settings = { }, selector : { - message : '.error.message', - field : 'input, textarea, select', - group : '.field', - input : 'input', - prompt : '.prompt', - submit : '.submit' + message : '.error.message', + field : 'input, textarea, select', + group : '.field', + input : 'input', + prompt : '.prompt', + submit : '.submit' }, className : { - error : 'error', - success: 'success', - down : 'down', - label : 'ui label prompt' + error : 'error', + success : 'success', + down : 'down', + label : 'ui label prompt' }, // errors @@ -624,20 +643,20 @@ $.fn.form.settings = { : false ; }, - match: function(value, matchingField) { + match: function(value, fieldIdentifier) { // use either id or name of field var $form = $(this), matchingValue ; - if($form.find('#' + matchingField).size() > 0) { - matchingValue = $form.find('#' + matchingField).val(); + if($form.find('#' + fieldIdentifier).size() > 0) { + matchingValue = $form.find('#' + fieldIdentifier).val(); } - else if($form.find('[name=' + matchingField +']').size() > 0) { - matchingValue = $form.find('[name=' + matchingField + ']').val(); + else if($form.find('[name=' + fieldIdentifier +']').size() > 0) { + matchingValue = $form.find('[name=' + fieldIdentifier + ']').val(); } - else if( $form.find('[data-validate="'+ matchingField +'"]').size() > 0 ) { - matchingValue = $form.find('[data-validate="'+ matchingField +'"]').val(); + else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').size() > 0 ) { + matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').val(); } return (matchingValue !== undefined) ? ( value.toString() == matchingValue.toString() )