fraport/fradrive
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')) {
formGroup.classList.add('form-group--valid')
}
submitBtn.removeAttribute('disabled');
if (isMulti) {
addNextInput();
}
@ -71,7 +70,6 @@
if (formGroup.classList.contains('form-group')) {
formGroup.classList.remove('form-group--valid')
}
submitBtn.setAttribute('disabled', 'disabled');
}
}
// addseventlistener destInput

37
templates/standalone/inputs.lucius
View File

@ -15,19 +15,7 @@ form {
align-items: center;
margin: 10px 0;
padding-left: 10px;
border-left: 8px 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;
border-left: 2px solid transparent;
}
.form-group__label {
@ -68,6 +56,27 @@ input[type="email"] {
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="password"]:focus,
input[type="url"]:focus,
@ -75,6 +84,7 @@ input[type="number"]:focus,
input[type="email"]:focus {
border-bottom-color: var(--lightbase);
background-color: transparent;
box-shadow: 0 0 13px var(--lighterbase);
}
/* BUTTON STYLE SEE default-layout.lucius */
@ -97,6 +107,7 @@ textarea {
textarea:focus {
background-color: transparent;
border-bottom-color: var(--lightbase);
box-shadow: 0 0 13px var(--lighterbase);
}
/* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */

8
templates/widgets/form.julius
View File

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