Separate field error into a macro and add support for custom error in inline fields

This commit is contained in:
Alice Gaudon 2020-04-25 11:27:12 +02:00
parent 0f48bd55b6
commit 50b01619ed
2 changed files with 33 additions and 18 deletions

View File

@ -281,20 +281,6 @@ form {
} }
} }
} }
.error, .hint {
padding: 2px;
text-align: left;
font-size: 14px;
.feather {
--icon-size: 14px;
}
}
.error {
color: $error;
}
} }
.inline-fields { .inline-fields {
@ -308,9 +294,32 @@ form {
margin: 0; margin: 0;
} }
& > :not(.form-field) { > :not(.form-field) {
padding: 32px 8px 8px 8px; padding: 32px 8px 8px 8px;
} }
+ {
.error, .hint {
margin-top: -16px;
margin-bottom: 16px;
}
}
}
.form-field, .inline-fields + {
.error, .hint {
padding: 2px;
text-align: left;
font-size: 14px;
.feather {
--icon-size: 14px;
}
}
.error {
color: $error;
}
} }
} }

View File

@ -77,9 +77,7 @@
{% endif %} {% endif %}
<label for="field-{{ name }}{{ '-' + extraData[0] if type == 'duration' }}">{{ placeholder }}</label> <label for="field-{{ name }}{{ '-' + extraData[0] if type == 'duration' }}">{{ placeholder }}</label>
{% if validation %} {{ fieldError(_locals, name) }}
<div class="error"><i data-feather="x-circle"></i> {{ validation.message }}</div>
{% endif %}
{% if hint %} {% if hint %}
<div class="hint"><i data-feather="info"></i> {{ hint }}</div> <div class="hint"><i data-feather="info"></i> {{ hint }}</div>
{% endif %} {% endif %}
@ -87,6 +85,14 @@
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}
{% macro fieldError(_locals, name) %}
{% set validation = _locals.validation() %}
{% set validation = validation[name] if validation[name] or null %}
{% if validation %}
<div class="error"><i data-feather="x-circle"></i> {{ validation.message }}</div>
{% endif %}
{% endmacro %}
{% macro websocket(websocketUrl, listener, reconnectOnClose = 1, checkFunction = 0) %} {% macro websocket(websocketUrl, listener, reconnectOnClose = 1, checkFunction = 0) %}
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {