Updating validation for case number (#181)

[#185279770]
codeforamerica · Jun 1, 2023 · f9ee8c7 · f9ee8c7
1 parent 7d7af29
commit f9ee8c7
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 3 deletions.
diff --git a/src/main/java/org/ladocuploader/app/inputs/LaDocUpload.java b/src/main/java/org/ladocuploader/app/inputs/LaDocUpload.java
@@ -1,6 +1,7 @@
 package org.ladocuploader.app.inputs;
 
 import formflow.library.data.FlowInputs;
+import jakarta.validation.constraints.Email;
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.Pattern;
 import jakarta.validation.constraints.Size;
@@ -29,7 +30,7 @@ public class LaDocUpload extends FlowInputs {
   @Date(message = "{client-info.date-format-validation}")
   private List<String> birthDate;
 
-  @Pattern(regexp = "^[\\w-\\.]+@[\\w-\\.]+\\.[\\w-]{2,4}$", message = "{client-info.provide-correct-email}")
+  @Email(message = "{client-info.provide-correct-email}")
   private String emailAddress;
 
   @Size(min = 14, max = 14, message = "{client-info.provide-10-digit-phone}")

diff --git a/src/main/resources/messages.properties b/src/main/resources/messages.properties
@@ -188,6 +188,7 @@ client-info.case-number=If you have it, what's your case #?
 client-info.number-format=Make sure that your case number contains only numbers.
 client-info.ssn=What's your social security number?
 client-info.provide-9-digit-ssn=Make sure your SSN has 9 digits.
+client-info.provide-9-digit-case-id=Make sure your case id has 9 digits.
 
 # How to add documents
 how-to-add-documents.title=How to add documents

diff --git a/src/main/resources/static/assets/css/custom.css b/src/main/resources/static/assets/css/custom.css
@@ -36,6 +36,18 @@ body {
   padding-right: calc(1.5rem + 12px);
 }
 
+/* Works for Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Works for Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
 .textarea-readonly::-webkit-scrollbar {
   -webkit-appearance: none;
 }

diff --git a/src/main/resources/templates/fragments/inputs/number.html b/src/main/resources/templates/fragments/inputs/number.html
@@ -0,0 +1,30 @@
+<th:block
+    th:fragment="number"
+    th:with="
+      hasHelpText=${!#strings.isEmpty(helpText)},
+      hasLabel=${!#strings.isEmpty(label)},
+      hasAriaLabel=${!#strings.isEmpty(ariaLabel)},
+      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"/>
+    <p class="text--help"
+       th:if="${hasHelpText}"
+       th:id="${inputName + '-help-text'}"
+       th:text="${helpText}"></p>
+    <input type="number" class="text-input form-width--med"
+           th:id="${inputName}"
+           th:name="${inputName}"
+           th:placeholder="${placeholder}"
+           th:attr="
+            aria-describedby=${hasHelpText ? inputName + '-help-text' : ''},
+            aria-labelledby=${hasAriaLabel ? ariaLabel : ''},
+            aria-invalid=${hasError}"
+           th:value="${inputData.getOrDefault(inputName, '')}">
+    <th:block
+        th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
+  </div>
+</th:block>
diff --git a/src/main/resources/templates/fragments/toolbar.html b/src/main/resources/templates/fragments/toolbar.html
@@ -16,6 +16,14 @@
                   const params = window.location.search.replace('?', '&').replace(/&lang=\S{2}/, "");
                   $(this).attr('href', $(this).attr('href') + params);
               })
+
+              $("#caseNumber").on("input", function (e) {
+                  var val = $(this).val();
+                  if (val !== null && val.length >= 9) {
+                      $(this).val(val.slice(0,9));
+                  }
+              })
+
           });
       </script>
       <div th:replace="~{fragments/localeSelect :: localeSelect}"></div>

diff --git a/src/main/resources/templates/laDocUpload/clientInfo.html b/src/main/resources/templates/laDocUpload/clientInfo.html
@@ -47,8 +47,8 @@
                   label=#{client-info.email-address},
                   helpText=#{client-info.contact-subtext})}"/>
 
-                <th:block th:replace="~{fragments/inputs/text ::
-                  text(inputName='caseNumber',
+                <th:block th:replace="~{fragments/inputs/number ::
+                  number(inputName='caseNumber',
                   label=#{client-info.case-number},
                   helpText=#{general.optional})}" />