Required field

Guidance

Applying basic validation helps improve the accuracy of user-entered data.

This basic required field validation can be used multiple times in one page. The error message for this is in the HTML.

The asterisk alone is not enough to ensure an accessible experience, we also add a visually-hidden text for screen readers that says "required", and add required to the HTML input element.

<!-- Basic required field with validation -->
<div class="gnb-form-input">
<label for="field-name">Required field<span class="required">*</span><span
		class="sr-only">required</span></label>
<input id="field-name" name="field-name" type="text" class="gnb-address-field required-field"
	required>
<div class="gnb-form-validation required-error" style="display: none;">
	This field is required.
</div>
</div>