richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Updates form validation features and docs 

Adds complete settings description, swaps error prompts to be loosely
coupled with transition component.


Former-commit-id: 062a4b961b
Former-commit-id: ee6ace02e9
pull/258/head
jlukic 11 years ago
parent
1f1a1da21d
commit
83142970e9
11 changed files with 475 additions and 176 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 77
      build/minified/modules/behavior/form.js
  2. 16
      build/uncompressed/elements/label.css
  3. 77
      build/uncompressed/modules/behavior/form.js
  4. 2
      node/src/documents/modules/dropdown.html
  5. 203
      node/src/documents/modules/form.html
  6. 8
      node/src/documents/modules/modal.html
  7. 77
      node/src/files/release/minified/modules/behavior/form.js
  8. 16
      node/src/files/release/uncompressed/elements/label.css
  9. 77
      node/src/files/release/uncompressed/modules/behavior/form.js
  10. 21
      src/elements/label.less
  11. 77
      src/modules/behavior/form.js

77
build/minified/modules/behavior/form.js
View File

@ -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() )

16
build/uncompressed/elements/label.css
View File

@ -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
*******************************/

77
build/uncompressed/modules/behavior/form.js
View File

@ -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() )

2
node/src/documents/modules/dropdown.html
View File

@ -503,7 +503,7 @@ type : 'UI Module'
</tbody>
</table>
<div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
<div class="ui horizontal section divider"><i class="icon setting"></i></div>
<h4 class="ui header">Callbacks</h4>
<p>Callback settings specify a function to occur after a specific behavior.</p>

203
node/src/documents/modules/form.html
View File

@ -226,12 +226,18 @@ type : 'UI Behavior'
</div>
</div>
<h2>Settings</h2>
<h2 class="ui dividing header">Settings</h2>
<h3 class="ui header">Defaults</h3>
<table class="ui red table segment">
<h3 class="ui header">
Form Settings
<div class="sub header">Form settings modify the form validation behavior</div>
</h3>
<table class="ui red celled definition table segment">
<thead>
<th colspan="3">Form Settings</th>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
@ -257,47 +263,208 @@ type : 'UI Behavior'
</tbody>
</table>
<table class="ui teal table segment">
<h3 class="ui header">
Validation Rules
<div class="sub header">Validation rules are a set of conditions required to validate a field</div>
</h3>
<table class="ui teal celled definition table segment">
<thead>
<th class="four wide">Name</th>
<th>Arguments</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>empty</td>
<td>value</td>
<td>Checks whether a field is empty</td>
</tr>
<tr>
<td>email</td>
<td>value</td>
<td>Checks whether a field is empty</td>
</tr>
<tr>
<td>length</td>
<td>value</td>
<td>Checks whether a field is longer than a length</td>
</tr>
<tr>
<td>not</td>
<td>value, notValue</td>
<td>Checks whether a field is not a value</td>
</tr>
<tr>
<td>is</td>
<td>value, text</td>
<td>Checks whether a field matches a value</td>
</tr>
<tr>
<td>maxLength</td>
<td>value</td>
<td>Checks whether a field is less than a max length</td>
</tr>
<tr>
<td>match</td>
<td>value, fieldIdentifier</td>
<td>Checks whether a field matches another field</td>
</tr>
<tr>
<td>url</td>
<td>value</td>
<td>Checks whether a field is a url</td>
</tr>
</tbody>
</table>
<h3 class="ui header">
Callbacks
<div class="sub header">Callback settings specify a function to occur after a specific behavior.</div>
</h3>
<table class="ui celled definition table segment">
<thead>
<th colspan="3">Callbacks</th>
<th class="four wide">Setting</th>
<th>Context</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>onValid</td>
<td>None</td>
<td>field</td>
<td>Callback on each valid field</td>
</tr>
<tr>
<td>onInvalid</td>
<td>None</td>
<td>field</td>
<td>Callback on each invalid field</td>
</tr>
<tr>
<td>onSuccess</td>
<td>None</td>
<td>form</td>
<td>Callback if a form is all valid</td>
</tr>
<tr>
<td>onFailure</td>
<td>None</td>
<td>form</td>
<td>Callback if any form field is invalid</td>
</tr>
</tbody>
</table>
<table class="ui blue table segment">
<div class="ui horizontal section divider"><i class="icon setting"></i></div>
<h3 class="ui header">
Templates
<div class="sub header">Templates are used to construct elements</div>
</h3>
<table class="ui celled definition table segment">
<thead>
<th class="four wide">Template</th>
<th>Arguments</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>error</td>
<td>Errors (Array)</td>
<td>Constructs the contents of an error message</td>
</tr>
<tr>
<td>prompt</td>
<td>Errors (Array)</td>
<td>Constructs an element to prompt the user to an invalid field</td>
</tr>
</tbody>
</table>
<h3 class="ui header">
DOM Settings
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
</h3>
<table class="ui celled definition table segment">
<thead>
<th colspan="3">General Settings</th>
<th>Setting</th>
<th class="six wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>moduleName</td>
<td>namespace</td>
<td>form</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>selector</td>
<td>
<div class="code">
selector : {
message : '.error.message',
field : 'input, textarea, select',
group : '.field',
input : 'input',
prompt : '.prompt',
submit : '.submit'
}
</div>
</td>
<td>Selectors used to match functionality to DOM</td>
</tr>
<tr>
<td>metadata</td>
<td>
<div class="code">
metadata : {
validate: 'validate'
},
</div>
</td>
<td>
HTML5 metadata attributes
</td>
</tr>
<tr>
<td>className</td>
<td>
<div class="code">
className : {
active : 'active',
placeholder : 'default',
disabled : 'disabled',
visible : 'visible'
}
</div>
</td>
<td>Class names used to attach style to state</td>
</tr>
</tbody>
</table>
<h3 class="ui header">
Debug Settings
<div class="sub header">Debug settings controls debug output to the console</div>
</h3>
<table class="ui blue celled definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>Form</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>debug</td>
<td>False</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
@ -307,20 +474,14 @@ type : 'UI Behavior'
</tr>
<tr>
<td>verbose</td>
<td>False</td>
<td>True</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>namespace</td>
<td>form</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
errors : {
action : 'You called a form action that was not defined',
method : 'The method you called is not defined.'
}
</div>

8
node/src/documents/modules/modal.html
View File

@ -1,4 +1,4 @@
---
def
layout : 'default'
css : 'modal-demo'
@ -26,10 +26,6 @@ type : 'UI Module'
</div>
</div>
</div> -->
<div class="ui basic labeled icon toggle overview button">
Definition
<i class="book icon"></i>
</div>
</div>
</div>
<div class="main container">
@ -116,7 +112,7 @@ type : 'UI Module'
<div class="no example">
<h4 class="ui header">Hide</h4>
<p>A modal can hide itself</p>
<div class="code" data-demo="true">
<div class="code">
$('.test.modal')
.modal('hide')
;

77
node/src/files/release/minified/modules/behavior/form.js
View File

@ -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() )

16
node/src/files/release/uncompressed/elements/label.css
View File

@ -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
*******************************/

77
node/src/files/release/uncompressed/modules/behavior/form.js
View File

@ -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() )

21
src/elements/label.less
View File

@ -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

77
src/modules/behavior/form.js
View File

@ -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() )

Write Preview
Loading…
Cancel
Save