diff --git a/src/definitions/behaviors/form.js b/src/definitions/behaviors/form.js index bafea3062..31709d0d2 100644 --- a/src/definitions/behaviors/form.js +++ b/src/definitions/behaviors/form.js @@ -40,18 +40,19 @@ $.fn.form = function(fields, parameters) { $allModules .each(function() { var - $module = $(this), - $field = $(this).find(selector.field), - $group = $(this).find(selector.group), - $message = $(this).find(selector.message), - $prompt = $(this).find(selector.prompt), - $submit = $(this).find(selector.submit), - - formErrors = [], - keyStuckDown = false, - - element = this, - instance = $module.data(moduleNamespace), + $module = $(this), + $field = $(this).find(selector.field), + $group = $(this).find(selector.group), + $message = $(this).find(selector.message), + $prompt = $(this).find(selector.prompt), + $submit = $(this).find(selector.submit), + $reset = $(this).find(selector.reset), + + formErrors = [], + keyHeldDown = false, + + element = this, + instance = $module.data(moduleNamespace), module ; @@ -60,6 +61,7 @@ $.fn.form = function(fields, parameters) { initialize: function() { module.verbose('Initializing form validation', $module, validation, settings); module.bindEvents(); + module.set.field.defaults(); module.instantiate(); }, @@ -102,7 +104,6 @@ $.fn.form = function(fields, parameters) { }, bindEvents: function() { - if(settings.keyboardShortcuts) { $field .on('keydown' + eventNamespace, module.event.field.keydown) @@ -114,9 +115,9 @@ $.fn.form = function(fields, parameters) { $field .on('blur' + eventNamespace, module.event.field.blur) ; - // attach submit events + // attach events to common elements module.attachEvents($submit, 'submit'); - + module.attachEvents($reset, 'reset'); $field .each(function() { var @@ -130,6 +131,69 @@ $.fn.form = function(fields, parameters) { ; }, + reset: function() { + $field + .each(function () { + var + $field = $(this), + $element = $field.parent(), + $fieldGroup = $field.closest($group), + defaultValue = $field.data(metadata.defaultValue), + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isErrored = $fieldGroup.hasClass(className.error) + ; + if(isDropdown) { + module.verbose('Resetting dropdown value', $element, defaultValue); + $element.dropdown('restore defaults'); + } + else if(isCheckbox) { + module.verbose('Resetting checkbox value', $element, defaultValue); + if(defaultValue === true) { + $element.checkbox('check'); + } + else { + $element.checkbox('uncheck'); + } + } + else { + module.verbose('Resetting field value', $field, defaultValue); + $field.val(defaultValue); + } + if(isErrored) { + module.verbose('Resetting error on field', $fieldGroup); + $fieldGroup.removeClass(className.error); + } + }) + ; + }, + + serialize: function () { + var + data = {} + ; + $field + .each(function () { + var + $field = $(this), + type = $field.prop('type'), + name = $field.prop('name') + ; + switch(type) { + case 'checkbox': + case 'radio': + if($field.is(':checked')) { + data[name] = $field.val(); + } + break; + default: + data[name] = $field.val(); + } + }) + ; + return data; + }, + removeEvents: function() { $module .off(eventNamespace) @@ -166,18 +230,18 @@ $.fn.form = function(fields, parameters) { $submit .addClass(className.pressed) ; - if(!keyStuckDown) { + if(!keyHeldDown) { $field .one('keyup' + eventNamespace, module.event.field.keyup) ; module.submit(); module.debug('Enter pressed on input submitting form'); } - keyStuckDown = true; + keyHeldDown = true; } }, keyup: function() { - keyStuckDown = false; + keyHeldDown = false; $submit.removeClass(className.pressed); }, blur: function() { @@ -362,6 +426,70 @@ $.fn.form = function(fields, parameters) { .removeClass(className.success) .addClass(className.error) ; + }, + field: { + defaults: function () { + $field + .each(function () { + var + $field = $(this), + isCheckbox = ($field.filter(selector.checkbox).length > 0), + value = (isCheckbox) + ? $field.is(':checked') + : $field.val() + ; + $field.data(metadata.defaultValue, value); + }) + ; + }, + value: function (field, value) { + var + data = {} + ; + data[field] = value; + return module.set.field.values.call(element, data); + }, + values: function (data) { + if($.isEmptyObject(data)) { + return; + } + $.each(data, function(key, value) { + var + $field = module.get.field(key), + $element = $field.parent(), + isCheckbox = $element.is(selector.uiCheckbox), + isDropdown = $element.is(selector.uiDropdown), + isRadio = $field.is(selector.radio), + fieldExists = ($field.length > 0) + ; + if(fieldExists) { + if(isRadio && isCheckbox) { + module.verbose('Selecting radio value', value, $field); + $field.filter('[value="' + value + '"]') + .parent(selector.uiCheckbox) + .checkbox('check') + ; + } + else if(isCheckbox) { + module.verbose('Setting checkbox value', value, $element); + if(value === true) { + $element.checkbox('check'); + } + else { + $element.checkbox('uncheck'); + } + } + else if(isDropdown) { + module.verbose('Setting dropdown value', value, $element); + $element.dropdown('set selected', value); + } + else { + module.verbose('Setting field value', value, $field); + $field.val(value); + } + } + }); + } } }, @@ -374,7 +502,7 @@ $.fn.form = function(fields, parameters) { ; // input keydown event will fire submit repeatedly by browser default - if(keyStuckDown) { + if(keyHeldDown) { return false; } @@ -606,7 +734,7 @@ $.fn.form = function(fields, parameters) { } }); } - if ( $.isFunction( found ) ) { + if( $.isFunction( found ) ) { response = found.apply(context, passedArguments); } else if(found !== undefined) { @@ -673,24 +801,29 @@ $.fn.form.settings = { onFailure : function() { return false; }, metadata : { + defaultValue: 'default', validate: 'validate' }, selector : { - message : '.error.message', - field : 'input, textarea, select', - group : '.field', - checkbox: 'input[type="checkbox"], input[type="radio"]', - input : 'input', - prompt : '.prompt.label', - submit : '.submit' + checkbox : 'input[type="checkbox"], input[type="radio"]', + field : 'input, textarea, select', + group : '.field', + input : 'input', + message : '.error.message', + prompt : '.prompt.label', + radio : 'input[type="radio"]', + reset : '.reset', + submit : '.submit', + uiCheckbox : '.ui.checkbox', + uiDropdown : '.ui.dropdown' }, className : { error : 'error', - success : 'success', + label : 'ui prompt label', pressed : 'down', - label : 'ui prompt label' + success : 'success' }, error: { @@ -698,6 +831,8 @@ $.fn.form.settings = { }, templates: { + + // template that produces error message error: function(errors) { var html = ''; return $(html); }, + + // template that produces label prompt: function(errors) { return $('
') .addClass('ui red pointing prompt label') @@ -750,20 +887,20 @@ $.fn.form.settings = { max, parts ; - if (range === undefined || range === '' || range === '..') { + if(range === undefined || range === '' || range === '..') { // do nothing } - else if (range.indexOf('..') == -1) { - if (intRegExp.test(range)) { + else if(range.indexOf('..') == -1) { + if(intRegExp.test(range)) { min = max = range - 0; } } else { parts = range.split('..', 2); - if (intRegExp.test(parts[0])) { + if(intRegExp.test(parts[0])) { min = parts[0] - 0; } - if (intRegExp.test(parts[1])) { + if(intRegExp.test(parts[1])) { max = parts[1] - 0; } }