---
title: Server-Side Form Validation Using Expressions
product: Form Library
description: With async form validation, your survey sends user input to the server for additional check. If entered data is invalid, the survey displays an error message. View a free demo example for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/javascript-async-form-validation/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Server-Side Form Validation Using Expressions (React)

This example demonstrates how you can build a validation expression that processes user input on the server side. You need to register a custom function that can be used in expressions. Such a function can query the server. SurveyJS also allows you to validate input in an event handler. This article explains the difference between server-side input validation using expressions and an event handler. Select React, Vue, Vanilla JS, jQuery, or Angular to view an example for your JavaScript framework of choice. 

## Event Handler vs Expressions

### Event Handler

You can validate user input in the `onServerValidateQuestions` event handler. Survey authors have no access to this handler and therefore cannot disable custom validation. The event handler is executed on navigation to the next page and on survey completion. This behavior does not allow for immediate validation. Refer to the following demo for more information: [Server-Side Form Validation Using an Event](https://surveyjs.io/form-library/examples/javascript-server-side-form-validation/).

### Expressions

If you want to query the server from an expression, implement and register a custom validator in your JavaScript code. Survey authors cannot modify the validator, but they can decide whether or not to use it in their expressions when they design their surveys. Immediate validation is available.

## Implement a Custom Async Validator

Follow the steps below to implement a custom asynchronous validator: 

1. Create a JavaScript function that validates data.       
This function should perform an asynchronous operation, for example, send a request to a server. Once the operation is complete, call the `this.resultData` method with a Boolean value that indicates a validation result.

1. Register the function.       
The following code registers the `myFunc` function under the name `foo`. The `isAsync` flag indicates that this function is asynchronous.

    ```js
    import { registerFunction } from "survey-core";
    registerFunction({
        name: "foo",
        func: myFunc,
        isAsync: true
    });
    ```

1. Use the validator within expressions.       
To reference the validator within an expression, use curly brackets: `{foo}`.

In this server-side validation example, you should enter a country name into the form field. The custom validator (`doesCountryExist`) will fetch a list of countries and check whether the entered country is in it. If the country is not found, the form field will display a validation error. Validation is triggered immediately after you leave the input field because the Survey's [`checkErrorsMode`](https://surveyjs.io/form-library/documentation/surveymodel#checkErrorsMode) property is set to `"onValueChanged"`. If you do not set this property, validation activates before a user proceeds to the next page or completes the survey.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";
import { registerFunction } from "survey-core";

function doesCountryExist([ countryName ]) {
  if (!countryName) {
    this.returnResult();
    return;
  }
  fetch("https://surveyjs.io/api/CountriesExample?name=" + countryName)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => {
      const found = data.length > 0;
      this.returnResult(found);
    });
}

registerFunction({
  name: "doesCountryExist",
  func: doesCountryExist,
  isAsync: true
});
function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "checkErrorsMode": "onValueChanged",
  "elements": [{
    "type": "text",
    "name": "country",
    "title": "Enter a country",
    "isRequired": true,
    "validators": [{
      "type": "expression",
      "text": "Country is not found",
      "expression": "doesCountryExist({country})"
    }]
  }]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/javascript-async-form-validation/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/javascript-async-form-validation/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/javascript-async-form-validation/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/javascript-async-form-validation/vanillajs.md)