fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix for reactive buttons

Browse Source
This commit is contained in:
Felix Hamann 2018-06-21 22:18:15 +02:00
parent 844bb4efd9
commit 7a97235481
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
templates/widgets/form.hamlet
View File

@ -6,7 +6,6 @@ $case formLayout
<div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error> <div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
$if not (Blaze.null $ fvLabel view) $if not (Blaze.null $ fvLabel view)
<label .form-group__label for=#{fvId view}>#{fvLabel view} <label .form-group__label for=#{fvId view}>#{fvLabel view}
$# TODO: inputs should have proper placeholders
<div .form-group__input> <div .form-group__input>
$# FIXME: file-input does not have `required` attribute, although set on form-group $# FIXME: file-input does not have `required` attribute, although set on form-group
^{fvInput view} ^{fvInput view}

44
templates/widgets/form.julius
View File

@ -3,23 +3,25 @@
window.utils = window.utils || {}; window.utils = window.utils || {};
// registers input-listener for each element in <elements> (array) and // registers input-listener for each element in <inputs> (array) and
// enables <button> if <validation> for these elements returns true // enables <button> if <validation> for these inputs returns true
window.utils.reactiveButton = function(elements, button, validation) { window.utils.reactiveButton = function(form, button, validation) {
if (elements.length == 0) { var requireds = Array.from(form.querySelectorAll('[required]'));
if (requireds.length == 0) {
return false; return false;
} }
var checkboxes = elements[0].getAttribute('type') === 'checkbox';
var eventType = checkboxes ? 'change' : 'input';
updateButtonState(); updateButtonState();
elements.forEach(function(el) {
requireds.forEach(function(el) {
var checkbox = el.getAttribute('type') === 'checkbox';
var eventType = checkbox ? 'change' : 'input';
el.addEventListener(eventType, function() { el.addEventListener(eventType, function() {
updateButtonState(); updateButtonState();
}); });
}); });
function updateButtonState() { function updateButtonState() {
if (validation.call(null, elements) === true) { if (validation.call(null, requireds) === true) {
button.removeAttribute('disabled'); button.removeAttribute('disabled');
} else { } else {
button.setAttribute('disabled', 'true'); button.setAttribute('disabled', 'true');
@ -33,19 +35,21 @@ document.addEventListener('DOMContentLoaded', function() {
// auto reactiveButton submit-buttons with required fields // auto reactiveButton submit-buttons with required fields
var forms = document.querySelectorAll('form'); var forms = document.querySelectorAll('form');
Array.from(forms).forEach(function(form) { Array.from(forms).forEach(function(form) {
var requireds = form.querySelectorAll('[required]');
var submitBtn = form.querySelector('[type=submit]'); var submitBtn = form.querySelector('[type=submit]');
if (submitBtn && requireds) { if (submitBtn) {
window.utils.reactiveButton(Array.from(requireds), submitBtn, function validateForm(inputs) { window.utils.reactiveButton(form, submitBtn, validateForm);
var done = true;
inputs.forEach(function(inp) {
var len = inp.value.trim().length;
if (done && len === 0) {
done = false;
}
});
return done;
});
} }
}); });
function validateForm(inputs) {
var done = true;
inputs.forEach(function(inp) {
var len = inp.value.trim().length;
if (done && len === 0) {
done = false;
}
});
return done;
}
}); });