diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index 0bb1aab7e..7fafb8276 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss @@ -1024,3 +1024,7 @@ nav.nav { font-size: units(3); font-weight: bold; } + +.form-control-error { + border: 4px solid #b10e1e +} diff --git a/app/main/views/templates.py b/app/main/views/templates.py index 5c59e1e7c..3a7315db7 100644 --- a/app/main/views/templates.py +++ b/app/main/views/templates.py @@ -645,6 +645,7 @@ def edit_service_template(service_id, template_id): return render_template( "views/edit-{}-template.html".format(template["template_type"]), form=form, + errors=form.errors if form.errors else None, template=template, heading_action="Edit", ) diff --git a/app/templates/components/components/input/template.njk b/app/templates/components/components/input/template.njk index 7f5634651..9e2cff08c 100644 --- a/app/templates/components/components/input/template.njk +++ b/app/templates/components/components/input/template.njk @@ -42,5 +42,7 @@ {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %} {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %} - {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}> + {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%} + {%- if params.required %} required{% endif %} +/> diff --git a/app/templates/components/form.html b/app/templates/components/form.html index 17cabc7f0..5875a19a9 100644 --- a/app/templates/components/form.html +++ b/app/templates/components/form.html @@ -19,7 +19,6 @@ data-{{ key }}="{{ val }}" {% endif %} {% endfor %} - novalidate > {{ caller() }} diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html index 3e479cbce..e8b6f813d 100644 --- a/app/templates/components/textbox.html +++ b/app/templates/components/textbox.html @@ -13,22 +13,13 @@ safe_error_message=False, rows=8, extra_form_group_classes='', - placeholder='' + placeholder='', + required=None ) %}
- {% if field.errors %} - - {% endif %}
{% endif %} + {% if field.errors %} + + Error: + {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %} + + {% endif %} {% if highlight_placeholders or autosize %} @@ -59,6 +56,8 @@ data_highlight_placeholders='true' if highlight_placeholders else 'false', rows=rows|string, placeholder=placeholder, + aria_describedby=field.name+"-error", + required='required' if required else None, **kwargs ) }} {% if suffix %} diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html index 97eac73dc..728b92cd6 100644 --- a/app/templates/views/edit-sms-template.html +++ b/app/templates/views/edit-sms-template.html @@ -29,9 +29,11 @@ {% call form_wrapper() %}
-
+