diff options
Diffstat (limited to 'app/assets/javascripts/behaviors/requires_input.js')
-rw-r--r-- | app/assets/javascripts/behaviors/requires_input.js | 90 |
1 files changed, 41 insertions, 49 deletions
diff --git a/app/assets/javascripts/behaviors/requires_input.js b/app/assets/javascripts/behaviors/requires_input.js index eb7143f5b1a..b20d108aa25 100644 --- a/app/assets/javascripts/behaviors/requires_input.js +++ b/app/assets/javascripts/behaviors/requires_input.js @@ -1,12 +1,10 @@ -/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, no-else-return, consistent-return, max-len */ +import '../commons/bootstrap'; + // Requires Input behavior // // When called on a form with input fields with the `required` attribute, the // form's submit button will be disabled until all required fields have values. // -import '../commons/bootstrap'; - -// // ### Example Markup // // <form class="js-requires-input"> @@ -14,49 +12,43 @@ import '../commons/bootstrap'; // <input type="submit" value="Submit"> // </form> // -(function() { - $.fn.requiresInput = function() { - var $button, $form, fieldSelector, requireInput, required; - $form = $(this); - $button = $('button[type=submit], input[type=submit]', $form); - required = '[required=required]'; - fieldSelector = "input" + required + ", select" + required + ", textarea" + required; - requireInput = function() { - var values; - values = _.map($(fieldSelector, $form), function(field) { - // Collect the input values of *all* required fields - return field.value; - }); - // Disable the button if any required fields are empty - if (values.length && _.any(values, _.isEmpty)) { - return $button.disable(); - } else { - return $button.enable(); - } - }; - // Set initial button state - requireInput(); - return $form.on('change input', fieldSelector, requireInput); - }; - $(function() { - var $form, hideOrShowHelpBlock; - $form = $('form.js-requires-input'); - $form.requiresInput(); - // Hide or Show the help block when creating a new project - // based on the option selected - hideOrShowHelpBlock = function(form) { - var selected; - selected = $('.js-select-namespace option:selected'); - if (selected.length && selected.data('options-parent') === 'groups') { - return form.find('.help-block').hide(); - } else if (selected.length) { - return form.find('.help-block').show(); - } - }; - hideOrShowHelpBlock($form); - return $('.select2.js-select-namespace').change(function() { - return hideOrShowHelpBlock($form); - }); - }); -}).call(window); +$.fn.requiresInput = function requiresInput() { + const $form = $(this); + const $button = $('button[type=submit], input[type=submit]', $form); + const fieldSelector = 'input[required=required], select[required=required], textarea[required=required]'; + + function requireInput() { + // Collect the input values of *all* required fields + const values = _.map($(fieldSelector, $form), field => field.value); + + // Disable the button if any required fields are empty + if (values.length && _.any(values, _.isEmpty)) { + $button.disable(); + } else { + $button.enable(); + } + } + + // Set initial button state + requireInput(); + $form.on('change input', fieldSelector, requireInput); +}; + +// Hide or Show the help block when creating a new project +// based on the option selected +function hideOrShowHelpBlock(form) { + const selected = $('.js-select-namespace option:selected'); + if (selected.length && selected.data('options-parent') === 'groups') { + form.find('.help-block').hide(); + } else if (selected.length) { + form.find('.help-block').show(); + } +} + +$(() => { + const $form = $('form.js-requires-input'); + $form.requiresInput(); + hideOrShowHelpBlock($form); + $('.select2.js-select-namespace').change(() => hideOrShowHelpBlock($form)); +}); |