From bd6e37c5d0b1384e60ba552c9e517a1e938d26b6 Mon Sep 17 00:00:00 2001 From: Jack Date: Mon, 10 Jul 2017 20:01:11 -0700 Subject: [PATCH] #4267 #5253 Adds new behaviors for form validation - Add rule, Add field, remove field, remove rule --- RELEASE-NOTES.md | 17 +++-- src/definitions/behaviors/form.js | 121 +++++++++++++++++++++++++----- 2 files changed, 114 insertions(+), 24 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 6eaf6f94d1..a27d3384a9 100755 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -2,16 +2,19 @@ ### Version 2.2.11 - April XX, 2017 -**Enhancements** +**New Features** +- **Form Validation** - Added `add rule` `add field`, `remove rule`, `remove field` to programmatically and and remove validation rules from form validation #4267 #5253 +- **Site** - Site now includes custom scrollbar styles for UI (not page) by default in WebKit/Chrome. Components with inverted content like dimmer include an inverted scrollbar. You can disable this by setting `@useCustomScrollbars: false` in your `site.variables` +- **Modal** - Adds new `scrolling content` variation to have a modal with content that scrolls +- **Sticky** - Sticky now includes a new setting `setSize` to determine whether it should set content size on stick to the size before sticking (fixed content uses different positioning system) #4360 - **Reset** - Upgrades to [normalize.css 7.0](https://necolas.github.io/normalize.css/) **Thanks @ivantcholakov** #4647 -- **Dropdown** - Improved spacing on `img` inside `menu item` and for selected `text` + +**Enhancements** +- **Dropdown** - Improved spacing on `image` inside `menu item` and for selected `text` - **Modal** - Adds `tiny` and `mini` sized modals #5123 **Thanks @Banandrew** -- **Modal** - Adds new `scrolling content` variation to have a modal with content that scrolls -- **Popup* - Added `bind clickaway` `bind touchclose` `bind close on scroll` behaviors to make it easier for `on: 'manual'` popup to specify behavior -- **Popup** - Separated className setting for `visible` into `visible` and `popupVisible`, this way you can remove visible indiciation on activating element without modifying popup. +- **Popup* - Added `bind clickaway` `bind touch close` `bind close on scroll` behaviors to make it easier for `on: 'manual'` popup to specify behavior +- **Popup** - Separated className setting for `visible` into `visible` and `popupVisible`, this way you can remove visible indication on activating element without modifying popup visibility. - **Build Tools** - All Gulp/NPM dependencies have been updated to their latest versions -- **Site** - Site now includes custom scrollbar styles for UI (not page) by default in WebKit/Chrome. You can disable this by setting `@useCustomScrollbars: false` in your `site.variables` -- **Sticky** - Sticky now includes a new setting `setSize` to determine whether it should set content size on stick to the size before sticking (fixed content uses different positioning system) #4360 **Bugs** - **Table**- Fix inverted table header color not applying properly to `sortable table` #5303 **Thanks @Banandrew** diff --git a/src/definitions/behaviors/form.js b/src/definitions/behaviors/form.js index d99485149c..d5a5149c2e 100644 --- a/src/definitions/behaviors/form.js +++ b/src/definitions/behaviors/form.js @@ -252,6 +252,17 @@ $.fn.form = function(parameters) { bracketedRule: function(rule) { return (rule.type && rule.type.match(settings.regExp.bracket)); }, + shorthandFields: function(fields) { + var + fieldKeys = Object.keys(fields), + firstRule = fields[fieldKeys[0]] + ; + return module.is.shorthandRules(firstRule); + }, + // duck type rule test + shorthandRules: function(rules) { + return (typeof rules == 'string' || $.isArray(rules)); + }, empty: function($field) { if(!$field || $field.length === 0) { return true; @@ -403,6 +414,23 @@ $.fn.form = function(parameters) { : 'keyup' ; }, + fieldsFromShorthand: function(fields) { + var + fullFields = {} + ; + $.each(fields, function(name, rules) { + if(typeof rules == 'string') { + rules = [rules]; + } + fullFields[name] = { + rules: [] + }; + $.each(rules, function(index, rule) { + fullFields[name].rules.push({ type: rule }); + }); + }); + return fullFields; + }, prompt: function(rule, field) { var ruleName = module.get.ruleName(rule), @@ -453,23 +481,9 @@ $.fn.form = function(parameters) { } else { // 2.x - if(parameters.fields) { - ruleKeys = Object.keys(parameters.fields); - if( typeof parameters.fields[ruleKeys[0]] == 'string' || $.isArray(parameters.fields[ruleKeys[0]]) ) { - $.each(parameters.fields, function(name, rules) { - if(typeof rules == 'string') { - rules = [rules]; - } - parameters.fields[name] = { - rules: [] - }; - $.each(rules, function(index, rule) { - parameters.fields[name].rules.push({ type: rule }); - }); - }); - } + if(parameters.fields && module.is.shorthandFields(parameters.fields)) { + parameters.fields = module.get.fieldsFromShorthand(parameters.fields); } - settings = $.extend(true, {}, $.fn.form.settings, parameters); validation = $.extend({}, $.fn.form.settings.defaults, settings.fields); module.verbose('Extending settings', validation, settings); @@ -644,6 +658,46 @@ $.fn.form = function(parameters) { }, add: { + // alias + rule: function(name, rules) { + module.add.field(name, rules); + }, + field: function(name, rules) { + rules = $.isArray(rules) + ? rules + : [rules] + ; + var + newValidation = {} + ; + if(module.is.shorthandRules(rules)) { + newValidation[name] = { + rules: [] + }; + $.each(rules, function(index, rule) { + newValidation[name].rules.push({ type: rule }); + }); + } + else { + newValidation[name] = { + rules: rules + }; + } + validation = $.extend({}, validation, newValidation); + module.debug('Adding rules', newValidation, validation); + }, + fields: function(fields) { + var + newValidation + ; + if(fields && module.is.shorthandFields(fields)) { + newValidation = module.get.fieldsFromShorthand(fields); + } + else { + newValidation = fields; + } + validation = $.extend({}, validation, newValidation); + }, prompt: function(identifier, errors) { var $field = module.get.field(identifier), @@ -696,6 +750,39 @@ $.fn.form = function(parameters) { }, remove: { + rule: function(field, rule) { + var + rules = $.isArray(rule) + ? rule + : [rule] + ; + if(validation[field] == undefined || !$.isArray(validation[field].rules)) { + return; + } + $.each(validation[field].rules, function(index, rule) { + if(rules.indexOf(rule.type) !== -1) { + module.debug('Removed rule', rule.type); + validation[field].rules.splice(index, 1); + } + }); + }, + field: function(field) { + var + fields = $.isArray(field) + ? field + : [field] + ; + $.each(fields, function(index, field) { + delete validation[field]; + }); + }, + // alias + rules: function(field, rules) { + module.remove.rule(field, rules); + }, + fields: function(fields) { + module.remove.field(fields); + }, prompt: function(identifier) { var $field = module.get.field(identifier), @@ -860,7 +947,7 @@ $.fn.form = function(parameters) { if(typeof field == 'string') { module.verbose('Validating field', field); fieldName = field; - field = validation[field]; + field = validation[field]; } var identifier = field.identifier || fieldName,