---
title: Custom Form Validation Using Expressions
product: Form Library
description: Validate input fields of a form to ensure that entered values satisfy the given validation rules. Refer to this free demo for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/add-custom-survey-data-validation/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Custom Form Validation Using Expressions (React)

Custom JavaScript validation for forms allows you to create more specific input validation logic than [built-in validators](https://surveyjs.io/form-library/examples/javascript-form-validation/). SurveyJS Form Library supports two ways to add custom validation—with an event or [expressions](https://surveyjs.io/form-library/documentation/design-survey-conditional-logic#expressions). This example demonstrates how to configure expressions. Switch between React, Vue, jQuery, Angular, and Vanilla JS to view the example for your JavaScript framework/library.

## Event Handler vs Expressions

### Event Handler

To create custom form validation in JavaScript with the `onValidateQuestion` event, you need to implement a corresponding event handler. Users have no access to this handler and therefore _cannot_ disable custom validation. Refer to the following demo for more information: [Custom Form Validation Using an Event](https://surveyjs.io/form-library/examples/add-custom-input-validation/).

### Expressions

For custom validation with expressions, you need to implement and register a custom validator in your JavaScript code to make the validator available within expressions. Users cannot modify the validator, but they can decide whether or not to use it in their expressions when they design their surveys and thus enable or disable custom validation.

## Implement a Custom Validator

Follow the steps below to implement a custom validator: 

1. Create a JavaScript function that validates data.       
This function should return a Boolean value that indicates a validation result (`true` if the value is valid, `false` otherwise).

1. Register the function.       
The following code registers the `myFunc` function under the name `foo`:

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

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

In this custom form validation example, the form field accepts only e-mail addresses hosted at `surveyjs.io`. The `isDomainValid` custom validator checks whether the entered e-mail address is valid. If the validation fails, the form field displays an error message. 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 isDomainValid([email]) {
    if (typeof email !== 'string' || !email.includes('@')) {
        return false;
    }

    const domain = email.trim().substring(email.indexOf("@") + 1);
    return domain === "surveyjs.io";
}

registerFunction({ name: "isDomainValid", func: isDomainValid });
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": "email",
      "isRequired": true,
      "title": "Enter your work e-mail address",
      "validators": [{
        "type": "expression",
        "expression": "isDomainValid({email})",
        "text": "Please enter an e-mail address hosted at surveyjs.io."
      }]
    }
  ]
};
```

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