From 15a105ca9bc1fdf1650ae0e72aadf4b21a93bdee Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Sun, 13 Sep 2015 14:24:54 -0400 Subject: [PATCH] Add many new form validation updates --- server/documents/behaviors/form.html.eco | 197 +++++++++++++++++++++-- server/documents/elements/icon.html.eco | 3 + server/documents/elements/label.html.eco | 10 +- server/documents/hotfix.html.eco | 63 ++++++++ server/files/javascript/validate-form.js | 64 +++++++- 5 files changed, 313 insertions(+), 24 deletions(-) diff --git a/server/documents/behaviors/form.html.eco b/server/documents/behaviors/form.html.eco index 1e152595a..82f80972e 100644 --- a/server/documents/behaviors/form.html.eco +++ b/server/documents/behaviors/form.html.eco @@ -24,18 +24,33 @@ type : 'UI Behavior'

Usage

-
-

Setting-up Fields

+
+

Specifying Validation Rules

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 the data-validate metadata matching the identifier provided in the settings object. + A validation object includes a list of form elements, and rules to validate each field against. Fields are matched by either the id, name, or data-validate property matching the identifier specified in the settings object.
-
+
+ $('.ui.form') + .form({ + fields: { + name : 'empty', + gender : 'empty', + username : 'empty', + password : ['minLength[6]', 'empty'], + skills : ['minCount[2]', 'empty'], + terms : 'checked' + } + }) + ; +
+
or
+
$('.ui.form') .form({ fields: { name: { - identifier : 'name', + identifier: 'name', rules: [ { type : 'empty', @@ -44,7 +59,7 @@ type : 'UI Behavior' ] }, skills: { - identifier : 'skills', + identifier: 'skills', rules: [ { type : 'minCount[2]', @@ -53,7 +68,7 @@ type : 'UI Behavior' ] }, gender: { - identifier : 'gender', + identifier: 'gender', rules: [ { type : 'empty', @@ -62,7 +77,7 @@ type : 'UI Behavior' ] }, username: { - identifier : 'username', + identifier: 'username', rules: [ { type : 'empty', @@ -71,7 +86,7 @@ type : 'UI Behavior' ] }, password: { - identifier : 'password', + identifier: 'password', rules: [ { type : 'empty', @@ -79,12 +94,12 @@ type : 'UI Behavior' }, { type : 'minLength[6]', - prompt : 'Your password must be at least 6 characters' + prompt : 'Your password must be at least {ruleValue} characters' } ] }, terms: { - identifier : 'terms', + identifier: 'terms', rules: [ { type : 'checked', @@ -146,6 +161,102 @@ type : 'UI Behavior'
+
+

Customizing Prompts

+

Form validation includes default error prompts for most cases, however these can be quite generic. To specify custom personalized values for a validation prompt use the prompt property with a rule.

+
You can set default messages for each validation rule type by modifying $fn.form.settings.prompt
+

Prompt also supports custom templating with the following values replaced

+ + + + + + + + + + + + + + + + + + + +
{name}The current text of a field's label, or if no label available its placeholder text
{identifier}The identifier used to match the field
{value}The current field value
{ruleValue}The value passed to a rule, for example minLength[100] would set this value to 100
+
+ $('.ui.form') + .form({ + fields: { + field1: { + rules: [ + { + type : 'empty' + } + ] + }, + field2: { + rules: [ + { + type : 'exactly[dog]', + prompt : '{name} is set to "{value}" that is totally wrong. It should be {ruleValue}' + } + ] + } + } + }) + ; +
+
+
+
+ + +
+
+ + +
+
+
Submit
+
+
+
+
+ +
+

Matching Fields

+

By default the property name used in the validation object will match against the id, name, or data-validate property of each input to find the corresponding field to match validation rules against.

+

If you need to specify a different identifier you can use the identifier property on each validation rule

+
+ $('.ui.form') + .form( + fields: { + name: { + identifier : 'special-name', + rules: [ + { + type : 'empty' + } + ] + } + } + }) + ; +
+
+
+ + +
+
Submit
+
+
+
+
+

Rules

@@ -1539,7 +1650,7 @@ type : 'UI Behavior' - + @@ -1583,6 +1694,68 @@ type : 'UI Behavior'
SettingDefaultDefault Description
+ +
+

+ Form Prompts +

+

Settings to modify default form prompts

+ + + + + + + + + + + + + + + + +
SettingDefault
text +
+ text: { + unspecifiedRule : 'Please enter a valid value', + unspecifiedField : 'This field' + } +
+
prompt +
+ prompt: { + empty : '{name} must have a value', + checked : '{name} must be checked', + email : '{name} must be a valid e-mail', + url : '{name} must be a valid url', + regExp : '{name} is not formatted correctly', + integer : '{name} must be an integer', + decimal : '{name} must be a decimal number', + number : '{name} must be set to a number', + is : '{name} must be \'{ruleValue}\'', + isExactly : '{name} must be exactly \'{ruleValue}\'', + not : '{name} cannot be set to \'{ruleValue}\'', + notExactly : '{name} cannot be set to exactly \'{ruleValue}\'', + contain : '{name} cannot contain \'{ruleValue}\'', + containExactly : '{name} cannot contain exactly \'{ruleValue}\'', + doesntContain : '{name} must contain \'{ruleValue}\'', + doesntContainExactly : '{name} must contain exactly \'{ruleValue}\'', + minLength : '{name} must be at least {ruleValue} characters', + length : '{name} must be at least {ruleValue} characters', + exactLength : '{name} must be exactly {ruleValue} characters', + maxLength : '{name} cannot be longer than {ruleValue} characters', + match : '{name} must match {ruleValue} field', + different : '{name} must have a different value than {ruleValue} field', + creditCard : '{name} must be a valid credit card number', + minCount : '{name} must have at least {ruleValue} choices', + exactCount : '{name} must have exactly {ruleValue} choices', + maxCount : '{name} must have {ruleValue} or less choices' + } +
+
+

Callbacks diff --git a/server/documents/elements/icon.html.eco b/server/documents/elements/icon.html.eco index a22585a74..bbf8a7bc3 100755 --- a/server/documents/elements/icon.html.eco +++ b/server/documents/elements/icon.html.eco @@ -1274,6 +1274,9 @@ themes : ['Default']

Size

An icon can vary in size

+ + +
diff --git a/server/documents/elements/label.html.eco b/server/documents/elements/label.html.eco index 18747ffc3..f984dff60 100755 --- a/server/documents/elements/label.html.eco +++ b/server/documents/elements/label.html.eco @@ -79,7 +79,7 @@ themes : ['Default', 'GitHub']

-
+

Pointing

A label can point to content next to it

@@ -99,13 +99,13 @@ themes : ['Default', 'GitHub']
-
+
That name is taken!
-
+
Your password must be 6 characters or more
@@ -131,13 +131,13 @@ themes : ['Default', 'GitHub']
-
+
That name is taken!
-
+
Your password must be 6 characters or more
diff --git a/server/documents/hotfix.html.eco b/server/documents/hotfix.html.eco index e69de29bb..a06262a7b 100644 --- a/server/documents/hotfix.html.eco +++ b/server/documents/hotfix.html.eco @@ -0,0 +1,63 @@ +--- +layout : 'blank' +css : 'hotfix' +standalone : true + +title : 'Test Page' +type : 'Library' +--- + +
+ +normal: +
+
+ +
+
+ + +
+
+ +
+
+ +abnormal: +
+
+
+ +
+
+ + +
+
+ +
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/server/files/javascript/validate-form.js b/server/files/javascript/validate-form.js index 4ab43cabd..7e87ba54e 100644 --- a/server/files/javascript/validate-form.js +++ b/server/files/javascript/validate-form.js @@ -6,10 +6,13 @@ semantic.validateForm.ready = function() { // selector cache var $dogForm = $('.dog.example .ui.form'), + $matchingForm = $('.matching.example .ui.form'), + $autoForm = $('.auto.example .ui.form'), + $promptForm = $('.prompt.example .ui.form'), $dropdownForm = $('.dropdown.example .ui.form'), $optionalForm = $('.optional.example .ui.form'), $inlineForm = $('.inline.example .ui.form'), - $form = $('.ui.form').not($dogForm).not($inlineForm).not($dropdownForm).not($optionalForm), + $form = $('.ui.form').not($dogForm).not($inlineForm).not($dropdownForm).not($optionalForm).not($autoForm).not($promptForm), $checkbox = $('.main.container .ui.checkbox'), $dropdown = $('.main.container .ui.dropdown'), // alias @@ -138,6 +141,24 @@ semantic.validateForm.ready = function() { } }; + $form + .form() + ; + + $matchingForm + .form({ + fields: { + name: { + identifier : 'special-name', + rules: [ + { + type : 'empty' + } + ] + } + } + }) + ; $inlineForm .form({ @@ -173,6 +194,41 @@ semantic.validateForm.ready = function() { .dropdown() ; + $autoForm + .form({ + fields: { + name : 'empty', + gender : 'empty', + username : 'empty', + password : ['minLength[6]', 'empty'], + skills : ['minCount[2]', 'empty'], + terms : 'checked' + } + }) + ; + + $promptForm + .form({ + fields: { + field1: { + rules: [ + { + type : 'empty' + } + ] + }, + field2: { + rules: [ + { + type : 'exactly[dog]', + prompt : '{name} is set to "{value}" that is totally wrong. It should be {ruleValue}' + } + ] + } + } + }) + ; + $optionalForm .form({ fields: { @@ -203,7 +259,6 @@ semantic.validateForm.ready = function() { .form({ fields: { dog: { - identifier: 'dog', rules: [ { type: 'empty', @@ -222,11 +277,6 @@ semantic.validateForm.ready = function() { } }) ; - - $form - .form() - ; - };