# Data Source Validation
The [**DataSource**](https://help.form.io/userguide/forms/form-building/form-components/premium-components#data-source) 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.
2. In the component settings, open the **Fetch** tab. Copy the location of [states.json](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FwmAq91bwK86ah0TVWHFb%2Fstates.json?alt=media\&token=bcf83383-f5e4-48b4-b977-4a0ad22b044e) and paste it into the **Data Source URL** field. This is a JSON file of the 50 US States and their canonical abbreviation.\
\
states.json is available in the [files](https://help.form.io/assets/files "mention")section of Help.Form.io
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 **Text Field** called Validate JSON to the form which will function as our input field for validating 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.
{% embed url="" %}
Alternatively, you can change the JavaScript code to validate against the State abbreviation instead of the name by replacing [name with abbreviation](#user-content-fn-1)[^1] 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**.*
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](#user-content-fn-2)[^2] 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](#user-content-fn-2)[^2] 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
```javascript
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:
```javascript
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.
{% embed url="" %}
This process will help confirm that the validation mechanism is triggered appropriately and that the validation message disappears upon entering a valid Color name.
[^1]: Line 3 of the code
```javascript
return item.abbreviation === search
```
[^2]: The URL will be unique to your own project
