Skip to content

Using Validation Within Web Components

You can use the data validation to make sure users follow specific rules when they enter data into your application. In the ThingWorx Web Component SDK, validation is defined using ptcs-behavior-validate. Properties for messages and details enable you to guide users when data is missing or not in the required format. For example, you can use validation to make sure that an e-mail address that is provided in a contact matches a specific format. Validation helps reduce the number of errors that are sent to a server. You can combine different types of validation on the client and the server side to design applications with advanced business logic and rules.

The following Web Components in the SDK library support validation:

  • ptcs-checkbox
  • ptcs-datepicker
  • ptcs-dropdown
  • ptcs-grid
  • ptcs-list
  • ptcs-radio
  • ptcs-slider
  • ptcs-textarea
  • ptcs-textfield

You can apply two types of validation to each one of these components:

Client-Side Validation

Client-side validation is applied before data is sent to a server, using the browser to execute JavaScript that runs on the client machine. Client validation is applied instantly and does not require making network calls to a remote server. The following are examples of data restrictions you can apply on the client side:

  • Valid e-mail address
  • Valid ZIP code
  • Valid phone number
  • Required data field
  • Specific number of characters
  • Alphanumeric characters

Server-Side Validation

In server-side validation, data is typically validated when a user submits the data to the server. Alert messages are displayed after the data is validated on the server and the web page is updated. This type of validation enables you to compare the data to records in a database. In some cases, data may be valid on the client side, but may become invalid when external server validation is applied. For example:

  • The data already exists and cannot be duplicated
  • The current session times out

Use the SDK components externalValidity property to set the validation state on the server side. Combining both methods of validation enables you to build more secure and efficient applications. For more information about applying validation to web components, see ptcs-behavior-validate.

Validation Messages

You can display error, criteria, and success messages for each one of the listed components. These messages help guide users on the required data values or patterns.

Criteria Message

Criteria messages provide users with any necessary instructions that can guide them when they are entering data into an application that uses a web component. You can define a message, additional details, and an icon.

Success Message

Success messages are displayed when the validation on the client side or the server side is successful. You can choose to display a success message to alert users that their input matches the requirements.

Failure Message

A failure message is used to alert the user that their data does not match validation requirements that are defined on the server or the client side of the application. When resubmission is allowed, the failure messages should also guide the user on the required data format in case they want to submit data again.