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