darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-27 09:29:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

Focusing validation on individual form with one input

Browse Source
This commit is contained in:
Jonathan Bobel
2025-03-03 13:33:45 -05:00
parent f4ca597964
commit 94f881477e
7 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/validation.js
View File

@@ -24,7 +24,7 @@ function getFieldLabel(input) {
// Attach validation logic to forms
function attachValidation() {
const forms = document.querySelectorAll("form");
const forms = document.querySelectorAll("form.send-one-off-form");
forms.forEach((form) => {
const inputs = form.querySelectorAll("input, textarea, select");

2
app/main/views/send.py
View File

@@ -167,7 +167,7 @@ def send_messages(service_id, template_id):
# just show the first error, as we don't expect the form to have more
# than one, since it only has one field
first_field_errors = list(form.errors.values())[0]
error_message = '<span class="usa-error-message">'
error_message = '<span class="error message usa-error-message">'
error_message = f"{error_message}{first_field_errors[0]}"
error_message = f"{error_message}</span>"
error_message = Markup(error_message)

2
app/templates/components/file-upload.html
View File

@@ -20,7 +20,7 @@
</span>
{% endif %}
{% if field.errors and show_errors %}
<span class="error-message">
<span class="error-message usa-error-message">
{{ field.errors[0] }}
</span>
{% endif %}

2
app/templates/components/radios.html
View File

@@ -32,7 +32,7 @@
<legend class="form-label {% if bold_legend %}bold{% endif %}">
{{ field.label.text }}
{% if field.errors %}
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
<span class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
{{ field.errors[0] }}
</span>
{% endif %}

2
app/templates/components/select-input.html
View File

@@ -52,7 +52,7 @@
</span>
{% endif %}
{% if field.errors %}
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
<span class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
{{ field.errors[0] }}
</span>
{% endif %}

2
app/templates/components/textbox.html
View File

@@ -32,7 +32,7 @@
</div>
{% endif %}
{% if field.errors %}
<span id="{{ field.name}}-error" class="usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}" tabindex="-1" aria-live="assertive" role="alert">
<span id="{{ field.name}}-error" class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}" tabindex="-1" aria-live="assertive" role="alert">
<span class="usa-sr-only">Error:</span>
{% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
</span>

4
tests/javascripts/validation.test.js
View File

@@ -5,14 +5,14 @@ describe("Form Validation", () => {
beforeEach(() => {
document.body.innerHTML = `
<form class="test-form">
<form class="send-one-off-form">
<label for="test-input">Test Input</label>
<input id="test-input" name="testInput" type="text" />
<button type="submit">Submit</button>
</form>
`;
form = document.querySelector(".test-form");
form = document.querySelector(".send-one-off-form");
input = document.getElementById("test-input");
submitButton = form.querySelector("button");