Validate User Input

When users are filling in your form, you might want to check that the information they enter is valid and that they have provided all the information you need. Digitise Forms provides a number of ways to allow you to validate data input:

  • Marking an Element as 'Required'
  • Using one of the supplied format checkers
  • Comparing user input against a 'regular expression'
  • Custom validation using JavaScript
  • Setting a maximum number of characters which can be entered

Most Elements which allow data input or user selection can be validated in one or more of the above ways.

In addition, you can also specify that required, format checking and maximum length validations should be performed by a form's Digitise Forms Server component when data is sent to it, in order to mitigate against invalid data being sent directly to the Digitise Forms Server and bypassing a form's validation process. For more details about server-side validation refer to the topic Server-side Data Validation.

 

Validation is defined separately for each Element on a form; in the Element's properties under the Rules tab in the Properties Pane.

If validation is specified, when a user is completing a form, the validation will be performed in one or more of the following situations, depending upon the Element:

  • When the value within an Element changes
  • When the Element loses focus
  • When a user attempts to move forward to a different page within the form
  • When the form is submitted, using a Submit button, using an Event action or calling the submitForm scripting function
  • When a user types or pastes a value into the Element
  • Elements are not validated if they are hidden when the validation takes place.

 

The File Upload and Capita Pay360 Cart Elements only allow you to mark the Element as Required and use a different method to configure validation than that described here. For details refer to the separate topics covering the individual Elements themselves: File Upload, Capita Pay360 Cart Element.

 

For all other Elements, which support validation, you can specify validation as follows:

Select the Element in the Form Design workspace.

The Element's properties will display in the Properties Pane.

Validation is handled under the Rules tab, Picture showing the Rules tab.. If an Element doesn't have a Rules tab within its properties, the Element cannot be validated using the Rules properties discussed here. However, you may be able to validate it another way, for example using custom JavaScript in conjunction with an Event or by using a SQL Server Stored Procedure instead. Complex Elements may only allow validation of some parts of the Element and won't display any Failure messages specified.

To specify validation, click on the Rules tab, Picture showing the Rules tab., if not already selected.

Click on the Rules button, Picture showing the Rules button..

The Rules Builder pop-up will be displayed:

Picture showing the Rules Builder popup.

At the top of the pop-up, the heading displays the name of the Element's property whose value will be validated at runtime, in the image above it is the selected Element's value property.

The Rules Builder pop-up allows you to specify one or more validation rules for this Element.

To add a new rule, click on Picture showing the Add New Rule button..

The following menu will be displayed:

Picture showing the Add New Rule context menu.

 

You can add more than one type of validation to an Element, if you need to.

For example, you might want to specify that an element is both required and that it should contain an email address.

To do this, add the first validation, selecting Required from the Picture showing the Add New Rule button. button menu. Then click the Picture showing the Add New Rule button. button again and this time choose Resource. Both validation rules will be displayed in the Rules Builder and you can then choose to check for an email format in the Resource rule.

You can remove a validation item from the list of validations assigned to the current Element, by clicking on the Picture showing the Remove button. button to the right of the validation item you want to remove. Note that if you remove a JavaScript validation, the JavaScript itself will not be deleted and will still be available to apply to other Elements.

 

When you have finished specifying your validation rules, click on the Save button to save your changes or on the Cancel button to close the pop-up and lose your changes. The Reset button will clear the pop-up contents, allowing you to start again.

The Rules property will now show your current validation rules:

Picture showing the Rules Property box.

  • If you mark an Element as Required, you will need to reload the form in order to display the red asterisk beside the Element in the Form Design workspace.

 

If you want to change the validation rules for an Element, first select the Element to display its properties. Then open the Rules tab, Picture showing the Rules tab., and click on the Rules button, Picture showing the Rules button., to display the Rules Builder pop-up again. You can now edit the validation rules within the pop-up in the same way as when creating new rules. If you want to change the validation type, e.g. from Required to Resource, you will need to delete the original rule and add a new one for your new validation type. If you have a Resource validation selected, however, you can change the format, e.g. from Postcode to UK Phone Number, by simply selecting a different format from the drop-down list; you don't need to delete the rule and add it in again.

 

At runtime, if an Element fails a validation check, other than maximum length, it will automatically be surrounded by a red border to indicate to the form user that there is an issue. This border will remain displayed until the user enters a valid value within the Element. If, after validating a page, the first invalid Element on the page is not currently visible, the page will be scrolled to bring the first invalid Element into view.