debian-mirror-gitlab/app/assets/javascripts/behaviors/requires_input.js

61 lines
1.8 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2020-03-13 15:44:24 +05:30
import { isEmpty } from 'lodash';
2017-08-17 22:00:37 +05:30
import '../commons/bootstrap';
2016-09-29 09:46:39 +05:30
// 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.
//
// ### Example Markup
//
// <form class="js-requires-input">
// <input type="text" required="required">
// <input type="submit" value="Submit">
// </form>
//
2016-09-13 17:45:13 +05:30
2017-08-17 22:00:37 +05:30
$.fn.requiresInput = function requiresInput() {
const $form = $(this);
const $button = $('button[type=submit], input[type=submit]', $form);
2018-12-13 13:39:08 +05:30
const fieldSelector =
'input[required=required], select[required=required], textarea[required=required]';
2017-08-17 22:00:37 +05:30
function requireInput() {
// Collect the input values of *all* required fields
2021-03-08 18:12:59 +05:30
const values = Array.from($(fieldSelector, $form)).map((field) => field.value);
2017-08-17 22:00:37 +05:30
// Disable the button if any required fields are empty
2020-03-13 15:44:24 +05:30
if (values.length && values.some(isEmpty)) {
2017-08-17 22:00:37 +05:30
$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');
2018-03-27 19:54:05 +05:30
if (selected.length && selected.data('optionsParent') === 'groups') {
2018-11-08 19:23:39 +05:30
form.find('.form-text.text-muted').hide();
2017-08-17 22:00:37 +05:30
} else if (selected.length) {
2018-11-08 19:23:39 +05:30
form.find('.form-text.text-muted').show();
2017-08-17 22:00:37 +05:30
}
}
2016-09-13 17:45:13 +05:30
2017-08-17 22:00:37 +05:30
$(() => {
2019-02-15 15:39:39 +05:30
$('form.js-requires-input').each((i, el) => {
const $form = $(el);
2017-09-10 17:25:29 +05:30
$form.requiresInput();
hideOrShowHelpBlock($form);
$('.select2.js-select-namespace').change(() => hideOrShowHelpBlock($form));
2019-02-15 15:39:39 +05:30
});
2017-08-17 22:00:37 +05:30
});