LogoLogo
Getting StartedDevelopersDeployment GuideGet Help
  • Quick Links
  • Welcome to Form.io
    • Getting Started With Form.io
    • Launch a Form
    • Overview of Form.io
  • Developer Tool Ecosystem
    • PDF Solution
    • Enterprise Form Builder
    • Form View Pro
    • The Security Module
    • Accessibility Compliance Module
    • Developer License
    • SQL Connector - Deprecated
    • Integration Libraries
    • Form.io CLI Tool
  • User Guide
    • Introduction
    • Form.io Developer Portal
    • Teams
    • Projects
      • Project UI
      • Project Settings
      • Stages
      • Multi-Tenancy
    • Resources
      • ResourceJS
    • Forms
      • Form Creation
      • Form Types
      • PDF Forms
      • Embedding a Form
      • Form Revisions
      • Form Settings
    • Form Building
      • Form Builder UI
      • Form Components
        • Component Settings
        • Basic Components
          • Resource as Select Component Data Source
        • Advanced Components
        • Layout Components
        • Data Components
        • Premium Components
          • Nested Forms
        • Custom Components
      • Logic & Conditions
      • Existing Resource Fields
      • Actions
    • Submissions
      • Accessing Submissions
      • Importing Submissions
    • Form.io eSignature - Coming Soon
    • Form.io Reporting Module
    • PDF Template Designer
    • Form View Pro
    • Form Manager
    • Enterprise Form Builder Module
  • Developer Guide
    • Introduction
      • Application Development
      • API Documentation
    • Form Development
      • Form Renderer
      • Form Builder
      • Form Embedding
      • Form Evaluations
      • Form Templates
      • Custom Components
      • Translations
    • JavaScript Development
      • JavaScript SDK
      • JavaScript Frameworks
      • JavaScript Utilities
    • Authentication and Authorization
      • SAML
      • OAuth
      • LDAP
      • Resource Based Authentication
      • Email Authentication
      • Two-Factor Authentication
    • Roles and Permissions
      • Field Match-Based Access
      • Field-Based Resource Access
      • Group Permissions
    • Integrations
      • Email Integrations
      • File Storage
      • Google Developer Console
      • eSign Integrations
      • Relational Databases
    • Modules
    • Fetch Plugin API
    • CSS Frameworks
    • Offline Mode
    • Audit Logging
  • Deployments
    • Self-Hosted Deployment
      • Local Deployment
        • Local File Storage
      • Kubernetes
      • Cloud Deployment
        • AWS Deployment
          • AWS Lambda
          • Form.io/AWS Elastic Beanstalk End-To-End Encrypted Deployment
        • Azure Deployment
          • Azure App Service
            • Azure MSSQL Connector - Deprecated
          • Azure Virtual Machine
          • Azure Kubernetes Service
          • Set up the DB
        • GCP Deployment
          • GCP Cloud Run
      • On-Premise Deployment
      • Enterprise Server
      • PDF Server
    • Deployment Configurations
      • DNS Configuration
      • Load Balancer Configuration
    • Licenses
      • License Management
      • Library Licenses
    • Portal Base Project
      • Portal SSO
      • Portal Translations
    • Maintenance and Migration
      • Changes to Premium Libraries
  • FAQ
    • FAQ
    • Tutorials & Workflows
      • Password Reset
      • Dynamic Select Filtering
      • Approval Workflow
      • SSO Email Token
      • Embedding A Video
      • Data Source Validation
      • Select Data Source Options
      • Nested Form Workflows
        • Nested Wizard Forms
      • Save as Draft
      • Role-Based Conditions
      • Custom Component
      • Dynamic Radio and Select Box Values
      • Override CKEDITOR
    • Errors
    • Examples
    • License Utilization Checks
  • Contact Us
Powered by GitBook
On this page
  • Validation From External JSON Data
  • Validation From Internal Resource Data

Was this helpful?

  1. FAQ
  2. Tutorials & Workflows

Data Source Validation

PreviousEmbedding A VideoNextSelect Data Source Options

Last updated 3 months ago

Was this helpful?

The component pulls in data from external sources to be utilized within your form. While it is most commonly used to populate data into other fields, this component can also be used to validate data input from other fields based on the source it is referencing.

Validation From External JSON Data

In this example, the DataSource retrieves data from an external API in JSON format. We will use a Text Field to validate the input against the reference data from the DataSource. The JSON data represents an array of USA States, including both the state name and abbreviation. In this case, we will focus on validating the input against the State name.

  1. To start, add a Data Source component to your form and add the following URL to the Data Source URL within the Fetch tab of the component settings. This is an API URL that contains a JSON array of USA States.

https://gists.rawgit.com/mshafrir/2646763/raw/states_titlecase.json
  1. Click the Trigger tab and check the Trigger On Form Init setting. This will ensure that the Data is fetched when the form is loaded.

  2. Next, add a Text Field called Validate JSON to the form which will function as our input field for validating against the JSON

  3. Within the Text Field settings, click the Validation tab and add the following JavaScript to the Custom Validation section.

const getState = function(search) {
const state = data.dataSource.filter(function(item){
    return item.name === search
});
return state;
}
valid = (getState(input).length>0) ? true : 'Input must be a USA State';

Here's a brief summary of what this Javascript code is doing. Since the Data Source is retrieving an array of items, we are unable to define and grab specific items of the array, like the state name, to validate against. To solve this a function has been added that performs a search within the array to find a matching State Name corresponding to the input of the Text Field. If the function identifies at least one record that matches the state name, the validation will be deemed successful.


  1. Use the form and input an invalid State name in the Text Field to ensure your validation is triggered. Add a valid State name and ensure the validation message is removed.

Alternatively, you can change the JavaScript code to validate against the State abbreviation instead of the name by replacing as indicated within the JSON URL.

Validation From Internal Resource Data

Another example is using the Data Source to validate against internal Resource data within your Project. To get this started, we need to first establish a Resource database the Data Source component can reference.

  1. Create a Resource called Color and add a Text Field called Color.

  2. Use the Resource and make 3 submissions to establish a database: Red, Yellow, Blue.

  1. Next, copy the embed URL for your Resource by clicking the Embed tab which we will use later

  2. Create a new form and add a Data Source field. Click the Fetch tab and paste the from step 3. Save the settings.

https://khvenypsypifjpi.form.io/color
  1. Add a Text Field called Validate Resource, we will come back to this field later.

  2. Next, open the Data Source settings again, click the Fetch tab, and add the following endpoint to the embed URL from Step 4

/submission?data.color={{data.validateResource}}

We have included an endpoint in the URL that acts as a filter to ensure that the data input into the Validate Resource Text Field corresponds to the Text Field Color data saved in our Resource. The data.validateResource references the API Property Name of the Validate Resource Text Field in our form, while data.color references the API Property Name of the Color Text Field in our Resource. By incorporating this filter, we ensure that the two fields are aligned and that the validation is based on matching the appropriate data.

The should look something like this:

https://khvenypsypifjpi.form.io/color/submission?data.color={{data.validateResource}}

  1. Within the Fetch tab of the Data Source settings, check the Form.io Authentication setting. This will ensure you have permission to reference the Resource data while using the form within the Project.

  1. Within the Fetch setting tab, click the Transform Data tab, add the following JavaScript code, and save the Data Source settings

value = responseData.length>0?responseData[0]:false;

If the Validate Resource Text Field successfully matches a record, the Data Source will return a value of true. On the other hand, if no match is found, the Data Source will not return any value, indicating false.


  1. Within the Data Source settings, click the Trigger tab, open the Trigger on Data Change dropdown, and select the Validate Resource field. This will ensure the Data Source is actively searching within the Resource when data is entered into the Validate Resource field.

  1. Save the Data Source settings

  2. Open the Validate Resource Textfield settings and click the Validation tab. Add the following Javascript code to the Custom Validation:

valid = (data.dataSource) ? true : 'Input must be Red, Yellow, or Blue';

The Data Source fetches data from the Color Resource whenever there is input within the Validate Resource Text Field. The input is subsequently validated using the filter we added to the Data Source Fetch URL. If a match is found, the Data Source will return a value, indicating that the input from the Text Field is valid.


  1. Use the form and enter an invalid Color in the Text Field to activate the validation. Afterward, input a valid Color name from your Resource to verify that the validation message is removed.

This process will help confirm that the validation mechanism is triggered appropriately and that the validation message disappears upon entering a valid Color name.

DataSource