---
title: Form Validation
product: Form Library
description: With built-in client-side validation, you can both make sure respondents fill out all mandatory form fields and check if the input is correctly formatted before it is submitted to the server. View a free demo example for JavaScript to learn more.
framework: Vue 3
source: https://surveyjs.io/form-library/examples/javascript-form-validation/vue3js
index: https://surveyjs.io/form-library/examples/overview.md
---

# Form Validation (Vue 3)

User input validation is used to ensure that respondents fill out all required form fields and the format of values is correct before they are submitted to the server. This example demonstrates how to configure built-in client-side form input validation.

SurveyJS Form Library supports multiple validator types. Most of them are configured in the [`validators`](https://surveyjs.io/form-library/documentation/question#validators) array. Add one or more objects to it and set their `type` property to one of the validator types listed in the table below. Refer to the Description column for information on other properties applicable to a specific validator type. All types also support the `text` property that allows you to override default validation messages.

| `type` | Description |
| ------ | ----------- |
| `"numeric"` | Throws an error if the answer is not a number or if an entered number is outside the range between [`minValue`](https://surveyjs.io/Documentation/Library?id=NumericValidator#minValue) and [`maxValue`](https://surveyjs.io/Documentation/Library?id=NumericValidator#maxValue). Alternatively, you can set the [`min`](https://surveyjs.io/form-library/documentation/questiontextmodel#min) and [`max`](https://surveyjs.io/form-library/documentation/questiontextmodel#max) properties in the question object to specify the range. |
| `"text"` | Throws an error if the length of entered text is outside the range between [`minLength`](https://surveyjs.io/Documentation/Library?id=TextValidator#minLength) and [`maxLength`](https://surveyjs.io/Documentation/Library?id=TextValidator#maxLength). |
| `"email"` | Throws an error if an entered value is not a valid e-mail address. |
| `"answercount"` | Throws an error if a user selects fewer choices than specified by [`minCount`](https://surveyjs.io/Documentation/Library?id=AnswerCountValidator#minCount) or more choices than specified by [`maxCount`](https://surveyjs.io/Documentation/Library?id=AnswerCountValidator#maxCount). Applies only to the question types that can have multiple values (for instance, [Checkbox](https://surveyjs.io/Documentation/Library?id=questioncheckboxmodel)). |
| `"regex"` | Throws an error if an entered value does not match a regular expression defined in the [`regex`](https://surveyjs.io/Documentation/Library?id=RegexValidator#regex) property.  
| `"expression"` | Throws an error when the [`expression`](https://surveyjs.io/Documentation/Library?id=ExpressionValidator#expression) evaluates to `false` (see [Expressions](/Documentation/Library?id=design-survey-conditional-logic#expressions)). |

SurveyJS Form Library also supports a Required validator. It throws an error if the answer is empty. Unlike other validator types, the Required validator cannot be configured in the `validators` array. To add the Required validator to a question, enable the question's [`isRequired`](https://surveyjs.io/form-library/documentation/question#isRequired) property. If you want to override the default validation message, set the [`requiredErrorText`](https://surveyjs.io/form-library/documentation/question#requiredErrorText) property. You can also specify the required state dynamically based on a condition. Use the [`requiredIf`](https://surveyjs.io/form-library/documentation/question#requiredIf) property to do this. Refer to the following help topic for more information: [Conditional Visibility](https://surveyjs.io/form-library/documentation/design-survey-conditional-logic#conditional-visibility).

This demo shows form validation examples where each question uses one of the validator types from the table above to validate user input. Question descriptions explain which values are considered valid. Enter _invalid_ values to ensure that data validation works. In addition, all questions have the Required validator. Leave one or more form fields empty and click Complete. You will see a validation error.

In this demo, validation is triggered immediately after you leave an 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="app" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; height:100%"></div>
```

### `src/App.vue`

```html
<template>
    <SurveyComponent :model="survey" />
</template>
<script setup lang="ts">
    import { Model } from "survey-core";
    import { SurveyComponent } from "survey-vue3-ui";
    import "survey-core/survey-core.min.css";
    import "./index.css";
    import { json } from "./json";

    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
</script>
```

### `src/index.css`

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

### `src/json.ts`

```ts
export const json = {
  "checkErrorsMode": "onValueChanged",
  "elements": [{
    "name": "numericvalidator",
    "type": "text",
    "inputType": "number",
    "title": "Numeric Validator",
    "description": "Enter a number within the range of 0 to 100",
    "isRequired": true,
    "validators": [{
      "type": "numeric",
      "text": "Value must be within the range of 0 to 100",
      "minValue": 0,
      "maxValue": 100
    }]
  }, {
    "name": "textlengthvalidator",
    "type": "comment",
    "title": "Text Length Validator",
    "description": "Enter text no shorter than 10 and no longer than 280 symbols",
    "isRequired": true,
    "validators": [{
      "type": "text",
      "minLength": 10,
      "maxLength": 280
    }]
  }, {
    "name": "emailvalidator",
    "type": "text",
    "inputType": "email",
    "title": "E-mail Validator",
    "description": "Enter an e-mail address",
    "isRequired": true,
    "validators": [
      { "type": "email" }
    ]
  }, {
    "name": "answercountvalidator",
    "type": "checkbox",
    "title": "Answer Count Validator",
    "description": "Select between two to four options",
    "isRequired": true,
    "choices": [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4",
      "Option 5",
      "Option 6"
    ],
    "colCount": 2,
    "validators": [{
      "type": "answercount",
      "minCount": 2,
      "maxCount": 4
    }]
  },{
    "name": "regexvalidator",
    "type": "text",
    "title": "RegEx Validator",
    "description": "Enter a password that contains at least one upper-case, one lower-case letter, a digit, and a special character",
    "isRequired": true,
    "validators": [{
      "type": "regex",
      "regex": "(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\\s)(?=.*[@$!%*?&])[\\da-zA-Z@$!%*?&]+",
      "text": "Your password must contain at least one upper-case, one lower-case letter, a digit, and a special character"
    }]
  }, {
    "name": "expressionvalidator",
    "type": "multipletext",
    "title": "Expression Validator",
    "description": "Specify a range of numbers",
    "isRequired": true,
    "items": [{
      "name": "minvalue",
      "title": "Minimum value",
      "isRequired": true,
      "inputType": "number",
      "validators": [
        { "type": "numeric" }
      ]
    }, {
      "name": "maxvalue",
      "title": "Maximum value",
      "isRequired": true,
      "inputType": "number",
      "validators": [
        { "type": "numeric" }
      ]
    }],
    "validators": [{
      "type": "expression",
      "expression": "{expressionvalidator.minvalue} < {expressionvalidator.maxvalue} or {expressionvalidator.minvalue} empty or {expressionvalidator.maxvalue} empty",
      "text": "The minimum value must not exceed the maximum value"
    }]
  }]
};
```

### `src/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `src/theme.ts`

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

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "survey-core": "latest",
    "survey-vue3-ui": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Other Frameworks

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