56 lines
1.5 KiB
Plaintext
56 lines
1.5 KiB
Plaintext
(function() {
|
|
'use strict';
|
|
|
|
window.utils = window.utils || {};
|
|
|
|
// registers input-listener for each element in <inputs> (array) and
|
|
// enables <button> if <validation> for these inputs returns true
|
|
window.utils.reactiveButton = function(form, button, validation) {
|
|
var requireds = Array.from(form.querySelectorAll('[required]'));
|
|
if (requireds.length == 0) {
|
|
return false;
|
|
}
|
|
updateButtonState();
|
|
|
|
requireds.forEach(function(el) {
|
|
var checkbox = el.getAttribute('type') === 'checkbox';
|
|
var eventType = checkbox ? 'change' : 'input';
|
|
el.addEventListener(eventType, function() {
|
|
updateButtonState();
|
|
});
|
|
});
|
|
|
|
function updateButtonState() {
|
|
if (validation.call(null, requireds) === true) {
|
|
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 submitBtn = form.querySelector('[type=submit]');
|
|
if (submitBtn) {
|
|
window.utils.reactiveButton(form, submitBtn, validateForm);
|
|
}
|
|
});
|
|
|
|
function validateForm(inputs) {
|
|
var done = true;
|
|
inputs.forEach(function(inp) {
|
|
var len = inp.value.trim().length;
|
|
if (done && len === 0) {
|
|
done = false;
|
|
}
|
|
});
|
|
return done;
|
|
}
|
|
|
|
});
|