---
title: Server-Side Form Validation Using an Event
product: Form Library
description: Server-side form validation is the process of sending user input to the server for additional check. If entered data is not valid or correct, a respondent receives immediate feedback in the form of an error message. See it in action with this free demo example for JavaScript.
framework: React
source: https://surveyjs.io/form-library/examples/javascript-server-side-form-validation/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Server-Side Form Validation Using an Event (React)

This example demonstrates how you can handle an event to process user input on the server side. SurveyJS also allows you to build an validation expression for the same purpose. This article explains the difference between server-side input validation using expressions and an event handler. Select React, Vue, Vanilla JavaScript, 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`](https://surveyjs.io/form-library/documentation/surveymodel#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.

### 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. Refer to the following demo for more information: [Server-Side Form Validation Using Expressions](https://surveyjs.io/form-library/examples/javascript-async-form-validation/).

## Handle the `onServerValidateQuestions` Event

An `onServerValidateQuestions` event handler accepts the survey as the first argument and an object with the following fields as the second argument:

- `data` - An object that contains question values.
- `errors` - An object for your error messages. Set error messages as follows: `errors["questionName"] = "My error message"`;
- `complete()` - A method that you should call when the request to the server has completed.

In this server-side validation example, you should enter a country name into the form field. A callback assigned to the `onServerValidateQuestions` event handler 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.

## 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";

function validateCountry(_, { data, errors, complete }) {
  const countryName = data["country"];
  if (!countryName) {
    complete();
    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;
      if (!found) {
        errors["country"] = "Country is not found";
      }
      complete();
    });
}
function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    survey.onServerValidateQuestions.add(validateCountry);
    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 = {
  "elements": [
    {
      "type": "text",
      "name": "country",
      "title": "Enter a country",
      "isRequired": true
    }
  ]
};
```

### `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-server-side-form-validation/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/javascript-server-side-form-validation/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/javascript-server-side-form-validation/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/javascript-server-side-form-validation/vanillajs.md)