2214 Client-side validation

app/assets/javascripts/validation.js

@@ -0,0 +1,47 @@
+// document.addEventListener("DOMContentLoaded", function () {
+//     const form = document.querySelector(".send-one-off-form");
+//     const phoneInput = document.getElementById("phone-number");
+
+//     // Try to get the error element
+//     let phoneError = document.getElementById("phone-number-error");
+
+//     // If not found, create it
+//     if (!phoneError) {
+//       phoneError = document.createElement("span");
+//       phoneError.id = "phone-number-error";
+//       phoneError.classList.add("usa-error-message");
+//       phoneError.style.display = "none"; // Keep it hidden initially
+//       phoneInput.insertAdjacentElement("afterend", phoneError);
+//     }
+
+//     form.addEventListener("submit", function (event) {
+//       let isValid = true;
+
+//       if (phoneInput.value.trim() === "") {
+//         showError(phoneInput, phoneError, "Phone number cannot be empty.");
+//         isValid = false;
+//       }
+
+//       if (!isValid) event.preventDefault();
+//     });
+
+//     // Remove error when user starts typing
+//     phoneInput.addEventListener("input", function () {
+//       if (phoneInput.value.trim() !== "") {
+//         hideError(phoneInput, phoneError);
+//       }
+//     });
+
+//     function showError(input, errorElement, message) {
+//       errorElement.textContent = message;
+//       errorElement.style.display = "block";
+//       input.classList.add("usa-input--error");
+//       input.setAttribute("aria-describedby", errorElement.id);
+//     }
+
+//     function hideError(input, errorElement) {
+//       errorElement.style.display = "none";
+//       input.classList.remove("usa-input--error");
+//       input.removeAttribute("aria-describedby");
+//     }
+//   });

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -288,7 +288,8 @@ td.table-empty-message {
     @include u-width('mobile-lg');
     margin-top: units(2);
   }
-  input#search {
+  input#search-by-name {
+    margin-top: units(1);
     width: 100%;
     border: 1px solid color('gray-60');
   }

app/templates/components/components/input/template.njk

@@ -12,7 +12,7 @@
     classes: params.label.classes,
     isPageHeading: params.label.isPageHeading,
     attributes: params.label.attributes,
-    for: params.id
+    for: params.text
   }) | indent(2) | trim }}
 {% if params.hint %}
   {% set hintId = params.id + '-hint' %}
@@ -26,7 +26,7 @@
   }) | indent(2) | trim }}
 {% endif %}
 {% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
+  {% set errorId = params.label.text + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
   {{ usaErrorMessage({
     id: errorId,
@@ -37,12 +37,16 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText,
   }) | indent(2) | trim }}
 {% endif %}
-  <input class="usa-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} usa-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
-  {%- if params.value %} value="{{ params.value}}"{% endif %}
-  {%- 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 -%}
-  {%- if params.required %} required{% endif %}
+  <input
+    class="usa-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} usa-input--error{% endif %}"
+    id="{{ params.label.text | lower | replace(' ', '-') }}"
+    name="{{ params.label.text | lower | replace(' ', '-') }}"
+    type="{{ params.type | default('text') }}"
+    {%- if params.value %} value="{{ params.value }}"{% endif %}
+    {%- 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 -%}
+    {%- if params.required %} required{% endif %}
   />
 </div>

app/templates/views/send-test.html

@@ -37,6 +37,8 @@
     data_kwargs={'force-focus': True}
   ) %}
     <div class="grid-row">
+      {% set extra_class = "extra-tracking" if form.placeholder_value.label.text == "phone number" else "" %}
+      {% set placeholder_id = "phone number" if form.placeholder_value.label.text == "phone number" else "" %}
       <div class="grid-col-12 {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
         {{ form.placeholder_value(param_extensions={"classes": "", "id": "phone-number"}) }}
       </div>

gulpfile.js

@@ -82,7 +82,7 @@ const javascripts = () => {
     paths.src + 'javascripts/totalMessagesChart.js',
     paths.src + 'javascripts/activityChart.js',
     paths.src + 'javascripts/sidenav.js',
-
+    paths.src + 'javascripts/validation.js',
   ])
     .pipe(plugins.prettyerror())
     .pipe(