Form validation requires passing in a validation object with the rules required to validate your form.
| Name | -Arguments | -Description | - - -
|---|---|---|
| empty | -value | -Checks whether a field is empty | -
| value | -Checks whether a field is a valid email address | -|
| length | -value | -Checks whether a field is longer than a length | -
| not | -value, notValue | -Checks whether a field is not a value | -
| contains | -value, text | -Checks whether a field contains text | -
| is | -value, text | -Checks whether a field matches a value | -
| maxLength | -value | -Checks whether a field is less than a max length | -
| match | -value, fieldIdentifier | -Checks whether a field matches another field | -
| url | -value | -Checks whether a field is a url | -
| checked | -- | -Checks whether a checkbox field is checked | -
Validation rules are a set of conditions required to validate a field
+ + +| Name | +Arguments | +Description | + + +
|---|---|---|
| empty | +value | +Checks whether a field is empty | +
| value | +Checks whether a field is a valid email address | +|
| length | +value | +Checks whether a field is longer than a length | +
| not | +value, notValue | +Checks whether a field is not a value | +
| contains | +value, text | +Checks whether a field contains text | +
| is | +value, text | +Checks whether a field matches a value | +
| maxLength | +value | +Checks whether a field is less than a max length | +
| match | +value, fieldIdentifier | +Checks whether a field matches another field | +
| url | +value | +Checks whether a field is a url | +
| checked | +- | +Checks whether a checkbox field is checked | +
Dropdowns can also be validated like other form fields. Simply match the validation rule to the hidden input associated with the dropdown
Forms that contain a ui message error block will automatically be filled in with form validation information.
@@ -278,7 +282,7 @@ type : 'UI Behavior'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.
You can use multiple arbitrary rules to validate a form
$('.foo').form('behavior name', argumentOne, argumentTwo)
+ All the following behaviors can be called using the syntax
+
+ | Setting | -Default | -Description | - - -
|---|---|---|
| keyboardShortcuts | -true | -Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively | -
| on | -submit | -Event used to trigger validation. Can be either submit, blur or change. | -
| revalidate | -true | -If set to true will revalidate fields with errors on input change | -
| delay | -true | -Delay from last typed letter to validate a field when using on: change or when revalidating a field. |
-
| inline | -false | -Adds inline error on field validation error | -
| transition | -- scale - | -Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions | -
| duration | -150 | -Animation speed for inline prompt | -
| Setting | -Context | -Description | - - -
|---|---|---|
| onValid | -field | -Callback on each valid field | -
| onInvalid | -field | -Callback on each invalid field | -
| onSuccess | -form | -Callback if a form is all valid | -
| onFailure | -form | -Callback if any form field is invalid | -
| Template | -Arguments | -Description | - - -
|---|---|---|
| error | -Errors (Array) | -Constructs the contents of an error message | -
| prompt | -Errors (Array) | -Constructs an element to prompt the user to an invalid field | -
| Setting | -Default | -Description | - - -
|---|---|---|
| namespace | -form | -Event 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 | -
Form settings modify the form validation behavior
+ +| Setting | +Default | +Description | + + +
|---|---|---|
| keyboardShortcuts | +true | +Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively | +
| on | +submit | +Event used to trigger validation. Can be either submit, blur or change. | +
| revalidate | +true | +If set to true will revalidate fields with errors on input change | +
| delay | +true | +Delay from last typed letter to validate a field when using on: change or when revalidating a field. |
+
| inline | +false | +Adds inline error on field validation error | +
| transition | ++ scale + | +Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions | +
| duration | +150 | +Animation speed for inline prompt | +
Callbacks specify a function to occur after a specific behavior.
+ +| Setting | +Context | +Description | + + +
|---|---|---|
| onValid | +field | +Callback on each valid field | +
| onInvalid | +field | +Callback on each invalid field | +
| onSuccess | +form | +Callback if a form is all valid | +
| onFailure | +form | +Callback if any form field is invalid | +
Templates are used to construct elements
+ +| Template | +Arguments | +Description | + + +
|---|---|---|
| error | +Errors (Array) | +Constructs the contents of an error message | +
| prompt | +Errors (Array) | +Constructs an element to prompt the user to an invalid field | +
| Setting | -Default | -Description | - - -
|---|---|---|
| name | -Form | -Name used in debug logs | -
| debug | -True | -Provides standard debug output to console | -
| performance | -True | -Provides standard debug output to console | -
| verbose | -True | -Provides ancillary debug output to console | -
| errors | -
-
- errors : {
- method : 'The method you called is not defined.'
- }
-
- |
- |
DOM settings specify how this module should interface with the DOM
+| Setting | +Default | +Description | + + +
|---|---|---|
| namespace | +form | +Event 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 controls debug output to the console
+ +| Setting | +Default | +Description | + + +
|---|---|---|
| name | +Form | +Name used in debug logs | +
| debug | +True | +Provides standard debug output to console | +
| performance | +True | +Provides standard debug output to console | +
| verbose | +True | +Provides ancillary debug output to console | +
| errors | +
+
+ errors : {
+ method : 'The method you called is not defined.'
+ }
+
+ |
+ |
Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.