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

nicer form-group validation

Browse Source
This commit is contained in:
Felix Hamann 2018-03-07 22:10:06 +01:00
parent 20b6828c96
commit c70cefa800
2 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
templates/widgets/form.julius
View File

@ -8,6 +8,11 @@ document.addEventListener('DOMContentLoaded', function() {
window.utils.reactiveInputLabel = function(input, label) {
if (input.value.length > 0) {
label.classList.add('reactive-label--small');
if (label.parentElement.classList.contains('form-group')) {
label.parentElement.classList.add('form-group--valid');
}
} else {
label.parentElement.classList.remove('form-group--valid');
}
input.addEventListener('focus', function() {
label.classList.add('reactive-label--small');
@ -16,6 +21,15 @@ document.addEventListener('DOMContentLoaded', function() {
label.classList.add('reactive-label--small');
input.focus();
});
input.addEventListener('input', function() {
if (label.parentElement.classList.contains('form-group')) {
if (input.value.length > 0) {
label.parentElement.classList.add('form-group--valid');
} else {
label.parentElement.classList.remove('form-group--valid');
}
}
});
input.addEventListener('blur', function() {
if (input.value.length < 1) {
label.classList.remove('reactive-label--small');
@ -57,15 +71,17 @@ document.addEventListener('DOMContentLoaded', function() {
Array.from(forms).forEach(function(form) {
var requireds = form.querySelectorAll('[required]');
var submitBtn = form.querySelector('[type=submit]');
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;
}
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;
});
return done;
});
}
});
});

4
templates/widgets/form.lucius
View File

@ -89,6 +89,10 @@ textarea:focus {
}
.form-group--required {
border-left: 8px solid var(--lighterbase);
}
.form-group--valid {
border-left: 8px solid var(--lightbase);
}