Comment on page
Data Source Validation
The DataSource 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.
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
- 2.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.
- 3.Next, add a Tex Field called Validate JSON to the form to serve as our input field that will validate the against the JSON.
- 4.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.
- 4.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 name with abbreviation as indicated within the JSON URL.
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.
- 3.Next, copy the embed URL for your Resource by clicking the Embed tab which we will use later
- 4.Create a new form and add a Data Source field. Click the Fetch tab and paste the Resource Emebd URL from step 3. Save the settings.
https://khvenypsypifjpi.form.io/color
- 5.Add a Text Field called Validate Resource, we will come back to this field later.
- 6.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 final URL should look something like this:
https://khvenypsypifjpi.form.io/color/submission?data.color={{data.validateResource}}
- 7.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.
- 8.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.
- 9.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.
- 9.Save the Data Source settings
- 10.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.
- 12.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.
Last modified 4mo ago