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

less obtrusive validation for forms and fix for submit-button

Browse Source
This commit is contained in:
Felix Hamann 2018-05-16 23:20:08 +02:00
parent 8634ad6ada
commit a17ba443ad
3 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/standalone/inputs.julius
View File

@ -63,7 +63,6 @@
if (formGroup.classList.contains('form-group')) { if (formGroup.classList.contains('form-group')) {
formGroup.classList.add('form-group--valid') formGroup.classList.add('form-group--valid')
} }
submitBtn.removeAttribute('disabled');
if (isMulti) { if (isMulti) {
addNextInput(); addNextInput();
} }
@ -71,7 +70,6 @@
if (formGroup.classList.contains('form-group')) { if (formGroup.classList.contains('form-group')) {
formGroup.classList.remove('form-group--valid') formGroup.classList.remove('form-group--valid')
} }
submitBtn.setAttribute('disabled', 'disabled');
} }
} }
// addseventlistener destInput // addseventlistener destInput

37
templates/standalone/inputs.lucius
View File

@ -15,19 +15,7 @@ form {
align-items: center; align-items: center;
margin: 10px 0; margin: 10px 0;
padding-left: 10px; padding-left: 10px;
border-left: 8px solid transparent; border-left: 2px solid transparent;
}
.form-group--required {
border-left: 8px solid var(--lighterbase);
}
.form-group--valid {
border-left: 8px solid var(--validbase);
}
.form-group--has-error {
border-left: 8px solid var(--errorbase) !important;
} }
.form-group__label { .form-group__label {
@ -68,6 +56,27 @@ input[type="email"] {
min-width: 400px; min-width: 400px;
} }
.form-group--required {
input, textarea {
border-bottom-color: var(--lighterbase);
}
}
.form-group--valid {
input, textarea {
border-bottom-color: var(--validbase);
}
}
.form-group--has-error {
input, textarea {
border-bottom-color: var(--errorbase);
}
}
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="url"]:focus, input[type="url"]:focus,
@ -75,6 +84,7 @@ input[type="number"]:focus,
input[type="email"]:focus { input[type="email"]:focus {
border-bottom-color: var(--lightbase); border-bottom-color: var(--lightbase);
background-color: transparent; background-color: transparent;
box-shadow: 0 0 13px var(--lighterbase);
} }
/* BUTTON STYLE SEE default-layout.lucius */ /* BUTTON STYLE SEE default-layout.lucius */
@ -97,6 +107,7 @@ textarea {
textarea:focus { textarea:focus {
background-color: transparent; background-color: transparent;
border-bottom-color: var(--lightbase); border-bottom-color: var(--lightbase);
box-shadow: 0 0 13px var(--lighterbase);
} }
/* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */ /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */

8
templates/widgets/form.julius
View File

@ -4,8 +4,8 @@
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 <elements> (array) and
// enables <button> if <fn> for these elements returns true // enables <button> if <validation> for these elements returns true
window.utils.reactiveButton = function(elements, button, fn) { window.utils.reactiveButton = function(elements, button, validation) {
if (elements.length == 0) { if (elements.length == 0) {
return false; return false;
} }
@ -19,7 +19,7 @@
}); });
function updateButtonState() { function updateButtonState() {
if (fn.call(null, elements)) { if (validation.call(null, elements) === true) {
button.removeAttribute('disabled'); button.removeAttribute('disabled');
} else { } else {
button.setAttribute('disabled', 'true'); button.setAttribute('disabled', 'true');
@ -36,7 +36,7 @@ document.addEventListener('DOMContentLoaded', function() {
var requireds = form.querySelectorAll('[required]'); var requireds = form.querySelectorAll('[required]');
var submitBtn = form.querySelector('[type=submit]'); var submitBtn = form.querySelector('[type=submit]');
if (submitBtn && requireds) { if (submitBtn && requireds) {
window.utils.reactiveButton(Array.from(requireds), submitBtn, function(inputs) { window.utils.reactiveButton(Array.from(requireds), submitBtn, function validateForm(inputs) {
var done = true; var done = true;
inputs.forEach(function(inp) { inputs.forEach(function(inp) {
var len = inp.value.trim().length; var len = inp.value.trim().length;