Update money input to show required attribute

codeforamerica · Feb 8, 2024 · 33018bc · 33018bc
1 parent ebf15b7
commit 33018bc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/main/resources/templates/fragments/form.html b/src/main/resources/templates/fragments/form.html
@@ -3,7 +3,6 @@
       th:action="@{${action}}"
       th:enctype="${enctype}"
       th:id="${formId}"
-      novalidate="true"
       autocomplete="off"
       method="post">
   <th:block th:replace="${content}"/>

diff --git a/src/main/resources/templates/fragments/inputs/money.html b/src/main/resources/templates/fragments/inputs/money.html
@@ -4,17 +4,23 @@
       hasHelpText=${!#strings.isEmpty(helpText)},
       hasLabel=${!#strings.isEmpty(label)},
       hasAriaLabel=${!#strings.isEmpty(ariaLabel)},
+      isRequiredInput=${requiredInputs.contains(inputName)},
       hasError=${
         errorMessages != null &&
         errorMessages.get(inputName) != null &&
         (#arrays.length(errorMessages.get(inputName)) > 0) }"
     th:assert="${!#strings.isEmpty(inputName)}, ${hasLabel || hasAriaLabel}">
   <div th:class="'form-group' + ${(hasError ? ' form-group--error' : '')}">
-    <label th:if="${hasLabel}" th:for="${inputName}" th:text="${label}" class="form-question"/>
+    <label th:if="${hasLabel}" th:for="${inputName}"  class="form-question">
+      <span th:text="${label}"></span>
+      <span th:if="${isRequiredInput}" class="required-input" aria-hidden="true">*</span>
+    </label>
     <p class="text--help"
        th:if="${hasHelpText}"
        th:id="${inputName + '-help-text'}"
        th:text="${helpText}"></p>
+    <th:block
+        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
     <div class="text-input-group form-width--med">
       <div class="text-input-group__prefix">$</div>
       <input type="text" class="text-input"
@@ -24,11 +30,10 @@
              th:attr="
               aria-describedby=${hasHelpText ? inputName + '-help-text' : ''},
               aria-labelledby=${hasAriaLabel ? ariaLabel : ''},
-              aria-invalid=${hasError}"
+              aria-invalid=${hasError},
+              aria-required=${isRequiredInput}"
              th:value="${fieldData.getOrDefault(inputName, '')}">
       <div th:if="${postfix != null}" th:text="${postfix}" class="text-input-group__postfix"></div>
     </div>
-    <th:block
-        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
   </div>
 </th:block>