fraport/fradrive-old
Archived
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) { window.utils.reactiveInputLabel = function(input, label) {
if (input.value.length > 0) { if (input.value.length > 0) {
label.classList.add('reactive-label--small'); 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() { input.addEventListener('focus', function() {
label.classList.add('reactive-label--small'); label.classList.add('reactive-label--small');
@ -16,6 +21,15 @@ document.addEventListener('DOMContentLoaded', function() {
label.classList.add('reactive-label--small'); label.classList.add('reactive-label--small');
input.focus(); 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() { input.addEventListener('blur', function() {
if (input.value.length < 1) { if (input.value.length < 1) {
label.classList.remove('reactive-label--small'); label.classList.remove('reactive-label--small');
@ -57,15 +71,17 @@ document.addEventListener('DOMContentLoaded', function() {
Array.from(forms).forEach(function(form) { Array.from(forms).forEach(function(form) {
var requireds = form.querySelectorAll('[required]'); var requireds = form.querySelectorAll('[required]');
var submitBtn = form.querySelector('[type=submit]'); var submitBtn = form.querySelector('[type=submit]');
window.utils.reactiveButton(Array.from(requireds), submitBtn, function(inputs) { if (submitBtn && requireds) {
var done = true; window.utils.reactiveButton(Array.from(requireds), submitBtn, function(inputs) {
inputs.forEach(function(inp) { var done = true;
var len = inp.value.trim().length; inputs.forEach(function(inp) {
if (done && len === 0) { var len = inp.value.trim().length;
done = false; 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 { .form-group--required {
border-left: 8px solid var(--lighterbase);
}
.form-group--valid {
border-left: 8px solid var(--lightbase); border-left: 8px solid var(--lightbase);
} }