Required Field Validation Options for Web Forms

Print Friendly and PDF Follow

The HTML5 "required" attribute is a new web attribute used on the fully accessible and responsive web pages first released with ILLiad v9.1. 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 ILLiad 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 on your ILLiad 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 ILLiad 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 ILLiad Client. This server validation is required and configured using the WebValidation table in the ILLiad 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 ILLiad server for more complex validation and sanitization. A visualization of the validation process is pictured below:

ILLiad_Validation.png

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. 

The "required" attribute cannot be added to read-only fields, hidden fields, or fields with multiple checkbox options.

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 "Journal Title" field on the Article Request form:

<div class="form-group col-md-9">
<label for="PhotoJournalTitle">
<span class="field">
<span class="<#ERROR name='ERRORPhotoJournalTitle'>">
Title (Journal, Conference Proceedings, Anthology)
<span class="req">(required)</span>
</span>
<br>
<span class="small-notes">
Please do not abbreviate unless your citation is abbreviated
</span>
</span>
<br>
</label>
<input type="text" class="form-control" name="PhotoJournalTitle"
id="PhotoJournalTitle" value="<#PARAM name='PhotoJournalTitle'>" required>
</div></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 ILLiad 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.

HTML5_Validation.png

If more than one field contains an error, then only the first invalid field on the form will be flagged for correction. The user will have to correct the flagged error and submit the form again to see the next error if more than one field is invalid. 
HTML5 validation is NOT a substitute for validation done on the ILLiad server. You should never rely only on HTML5 data validation for your web forms and should always have "backup" validation rules configured for all required fields in the WebValidation table to ensure that the data is properly sanitized and formatted before it is sent to the ILLiad Client.

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 ILLiad 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 "Journal Title" field of the Article Request form is validated by the server if the HTML5 "required" attribute is not applied to the field.

Since HTML5 validation is an optional additional layer of validation for your web forms, you may choose to only apply this layer of server validation to the field, if preferred. 

WebValidation Table

The server validation rule for the "Journal Title" field is first configured in the WebValidation table located in the Customization Manager:

NVTGC ILL
Formname ArticleRequest
Fieldname PhotoJournalTitle
Required Yes (Checked)
Validation .+
Error Photo Journal Title is a required field.
ErrorTag ERRORPhotoJournalTitle
  • The validation rule is applied to the default "ILL" NVTGC.
  • The rule is assigned to the Article Request form.
  • The rule is assigned to the "PhotoJournalTitle" field in the database.
  • The field is marked as required.
  • ".+" under Validation configures the rule to ensure that something is typed into the field.
  • The error message that will display if the field is not filled out is set to "Photo Journal Title is a required field."
  • The ErrorTag "ERRORPhotoJournalTitle" should be used in the code for the field to trigger the error message when the field input is invalid.

Server Validation Behavior

If the user has not entered anything into the "Journal Title" field on the Article 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 Journal 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. 

Server_Validation.png

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 ILLiad 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 "Journal Title" field on the Article Request form:

<div class="form-group col-md-9">
<label for="PhotoJournalTitle">
<span class="field">
<span class="<#ERROR name='ERRORPhotoJournalTitle'>">
Title (Journal, Conference Proceedings, Anthology)
<span class="req">(required)</span>
</span>
<br>
<span class="small-notes">
Please do not abbreviate unless your citation is abbreviated
</span>
</span>
<br>
</label>
<input type="text" class="form-control" name="PhotoJournalTitle"
id="PhotoJournalTitle" value="<#PARAM name='PhotoJournalTitle'>"
aria-required="true">
</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 ILLiad 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 ILLiad 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:

Attribute Details/Required Format
type="email" Requires a user to enter an email address with the minimally accepted format of [text]@[text]
type="url" Required the user to enter a URL with the minimally accepted format of [protocol]://[text]
pattern="[RegularExpression]"

Requires that the user input a value following a defined regular expression (RegEx) pattern.

Example: pattern="[aA]tlas[Ii]s[gG]reat” will accept the following values:

  • AtlasIsGreat, atlasisgreat, Atlasisgreat, AtlasIsgreat AtlasisGreat, atlasIsgreat, atlasisGreat

 

Questions?

If this article didn’t resolve your issue, please contact Atlas Support for assistance:

Contact Support