Skip to content

Commit

Permalink
Make required fields in dates and address fragments configurable
Browse files Browse the repository at this point in the history
  • Loading branch information
spokenbird committed May 24, 2024
1 parent 63d2e2e commit d4ec5b8
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 1 deletion.
35 changes: 35 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -669,6 +669,41 @@ Here is an example of using it with the `screenWithOneInput` fragment:

Note that passing `required=true` here will append the red `(required)` to the label.

#### Special situation for requiring address fields

Sometimes you may want to apply custom validations to address fields through actions that effectively
make the address field required. In these situations because you are not using annotations to make the
address fields required, the library won't pick up on the fact that the fields should be marked as required.

To handle this situation, we have provided a special attribute `requireAddressFields` which is a boolean
that can be passed when calling the address input fragment like so:
```html
<th:block th:replace="~{fragments/inputs/address ::
address(requireAddressFields=true,
inputName='residentialAddress')}"/>

```
This will apply the red `(required)` to the address fields in the UI. Note it will not do so for the
street address line 2 as these are typically considered optional.

#### Special situation for requiring date fields

Sometimes you may want to apply custom validations to date fields through actions that effectively make
the date fields required. In these situations because you are not using annotations to make the date
fields required, the library won't pick up on the fact that the fields should be marked as required.

For these situations we have provided a special attribute `requireDateFields` which is a boolean that
can be passed when calling the date input fragment like so:
```html
<th:block th:replace="~{fragments/inputs/date ::
date(inputName='birth',
requireDateFields=true,
label=#{personal-info.birth-label},
groupName='birthDate')}"/>
```

This will apply the red `(required)` to the date fields in the UI.

## Dynamic Input Fields

A field is dynamic if it is unknown exactly how many of them will be submitted on a given form
Expand Down
5 changes: 5 additions & 0 deletions src/main/resources/templates/fragments/inputs/address.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<th:block
th:fragment="address(validate, inputName)"
th:with="
requireAddressFields=${requireAddressFields ?: false},
streetAddressLabelDefault=#{address.street-address-1},
streetAddress2LabelDefault=#{address.street-address-2},
cityLabelDefault=#{address.city},
Expand All @@ -20,6 +21,7 @@
>
<th:block th:replace="~{fragments/inputs/text ::
text(inputName=${streetAddressInputName},
required=${requireAddressFields},
label=${streetAddressLabel},
helpText=${streetAddressHelpText})}"/>
<th:block th:replace="~{fragments/inputs/text ::
Expand All @@ -28,14 +30,17 @@
helpText=${streetAddress2HelpText})}"/>
<th:block th:replace="~{fragments/inputs/text ::
text(inputName=${cityInputName},
required=${requireAddressFields},
label=${cityLabel},
helpText=${cityHelpText})}"/>
<th:block th:replace="~{fragments/inputs/state ::
state(inputName=${stateInputName},
required=${requireAddressFields},
label=${stateLabel},
helpText=${stateHelpText})}"/>
<th:block th:replace="~{fragments/inputs/text ::
text(inputName=${zipCodeInputName},
required=${requireAddressFields},
label=${zipCodeLabel},
helpText=${zipCodeHelpText})}"/>
<input type="hidden"
Expand Down
3 changes: 2 additions & 1 deletion src/main/resources/templates/fragments/inputs/date.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
th:with="
hasLabel=${!#strings.isEmpty(label)},
hasAriaLabel=${!#strings.isEmpty(ariaLabel)},
requireDateFields=${requireDateFields ?: false},
requiredInputsForFlow=${requiredInputs.get(flow)},
isRequiredInput=${(requiredInputsForFlow != null && requiredInputsForFlow.getOrDefault(inputName + 'Month', false)) ||
(requiredInputsForFlow != null && requiredInputsForFlow.getOrDefault(inputName + 'Day', false)) ||
Expand All @@ -18,7 +19,7 @@
<legend th:if="${hasLabel}" th:for="${inputName}"
class="form-question">
<span th:text="${label}"></span>
<span th:if="${isRequiredInput && !hasAriaLabel}" class="required-input" th:text="#{general.required-field}"></span>
<span th:if="${(isRequiredInput || requireDateFields) && !hasAriaLabel}" class="required-input" th:text="#{general.required-field}"></span>
</legend>
<th:block
th:replace="~{fragments/inputError :: validationError(inputName=${inputName} + 'Month')}"></th:block>
Expand Down

0 comments on commit d4ec5b8

Please sign in to comment.