Required Field Validation Options for Web Forms

The HTML5 "required" attribute is a new web attribute used on the fully accessible and responsive web pages first released with Aeon v5.0. This field provides some additional functionality to the web pages in order to enhance the user experience, particularly for those using screen readers, and also performs some additional validation directly on your web pages to complement the more complex server-side validation performed in Aeon using the settings in the WebValidation Customization Manager table. This means that this new attribute will change some of the pre-existing validation behavior you may be used to in the older version of your Aeon web pages. This article will describe the changes, benefits, and alternatives to using the new "required" attribute for your required fields.

Web Form Validation

Previously, the Aeon web pages would only perform server validation on web forms when submitted to ensure that the data entered by the user was formatted appropriately before sending it to the Staff Client. This server validation is required and configured using the WebValidation and WebFormValidationLinks tables in the Aeon Customization Manager.

The "required" attribute adds an additional layer of simple HTML5 validation that is optional and will be applied directly to your web forms in the browser before the data is sent to the Aeon server for more complex validation and sanitization. A visualization of the validation process is pictured below:

HTML5 Validation (Optional)

When certain HTML5 attributes (including the "required" attribute) are added to a field on a web form, an additional layer of validation will be performed by the web browser right after the user clicks submit, but before the form data is sent to the server and validated through the settings configured in the Customization Manager's WebValidation table. The "required" attribute, in particular, will apply validation to simply make sure something has been typed in the field marked as required. 

Adding the "required" Attribute to a Field

The "required" attribute should be added to the code that controls the user input for the field. This is typically an <input>, <textarea>, or <select> element. The following code shows how to use the "required" attribute within the <textarea> element for the "Title" field on the default request form:

<div class="form-group col-md-8">
<label for="ItemTitle">
<span class="<#ERROR name='ERRORItemTitle'>">
Title
</span>
<span class="req">(required)</span>
</label>
<textarea class="form-control" name="ItemTitle" id="ItemTitle" 
rows="2" cols="40" required><#PARAM name="ItemTitle"></textarea>
</div>

HTML5 Validation Behavior

If the user has not entered anything into a field using the "required" attribute, several things will happen when the form is submitted:

• The form will not be sent to the Aeon server, meaning that the error message configured for that field in the WebValidation table will not display.
• The user will be returned to the first invalid field on the form and the cursor will automatically enter that field so that the user can correct the error. 
• A default tooltip message of “Please fill out this field” will display under the field indicating to the user that there is an error to correct. This message cannot be modified.

Server Validation (Required)

Once all fields satisfy HTML5 validation, the form will be sent to the server and any validation rules set for the form fields in the WebValidation table will be applied. If the WebValidation rules for the fields on the web form match the validation rules applied by the HTML5 attributes on those fields, then the form will pass the validation check and the data will be sent to the Staff Client. However, if you have additional validation rules configured that the user has not yet satisfied, they will be returned to the top of the form and prompted to fix the errors before the form can be submitted.

Server Validation Configuration

The following example will show how the "Title" field of the default request form is validated by the server if the HTML5 "required" attribute is not applied to the field.

Server Validation Behavior

If the user has not entered anything into the "Title" field on the default request form, several things will happen when the form is submitted:

• The user will be returned to the top of the form. The cursor will not be returned to any invalid fields and the user will instead have to manually navigate to those fields and enter the missing information.
• The error message configured for the Title field and any other invalid fields will display as a status line at the top of the page
• The invalid field titles will be colored red as a visible indication that the field is invalid. 

Meeting Accessibility Requirements Using Server Validation Only 

If you prefer not to use the HTML5 validation, then the "aria-required" attribute must be used in place of the HTML5 "required" attribute to meet accessibility standards for screenreaders. The "aria-required" attribute does not perform any validation, meaning the validation will be done entirely by the Aeon server/WebValidation table and additional accessible functionality such as returning keyboard focus to the first invalid field will not be performed.

Adding the "aria-required" Attribute to a Field

The "aria-required" attribute should be added to the code that controls the user input for the field. This is typically an <input>, <textarea>, or <select> element. The following code shows how to use the "aria-required" attribute within the <textarea> element for the "Title" field on the default request form:

<div class="form-group col-md-8">
<label for="ItemTitle">
<span class="<#ERROR name='ERRORItemTitle'>">
Title
</span>
<span class="req">(required)</span>
</label>
<textarea class="form-control" name="ItemTitle" id="ItemTitle" 
rows="2" cols="40" aria-required="true"><#PARAM name="ItemTitle"></textarea>
</div>

Benefits and Drawbacks of Using HTML5 Validation

You can review and consider the following benefits and drawbacks of the HTML5 validation performed by the "required" attribute to decide whether you'd like to use it for your web forms or if you'd just prefer to use the server validation configured for those fields in the Customization Manager. 

Benefits of HTML5 Validation

• HTML5 provides validation with quicker feedback than the typical server-side Aeon validation. Errors are provided to the user immediately after submission and the form is prevented from being sent to the server, meaning the page will not need to reload.
• The first invalid field found by the browser will receive keyboard focus meaning the cursor will return to the form field where the first error is found. This is beneficial for those using screenreaders so that they do not have to manually navigate back to the missing field from the beginning of the page. 
• All modern browsers support HTML5 validation. If the WebValidation table is not set up correctly or if server-side validation is infeasible due to a bug, then HTML5 can provide additional validation as a safeguard. 

Drawbacks of HTML5 Validation

• You cannot customize the look/style of the browser validation message tooltip that displays on invalid fields. This also means that your error messages defined in the Aeon Customization Manager for a required field may never display to patrons and they may only see the generic HTML5 tooltip.
• Only one invalid field is flagged for correction at a time, meaning that if the user has multiple invalid field entries, they will need to submit the form multiple times to find and correct them.

Other Types of HTML5 Validation

In addition to the "required" attribute, you can also add a few other HTML5 attributes to perform different types of HTML5 validation for your web form fields. These attributes should be added to the <input> element for the associated field in the same way that the "required" attribute is added: