diff --git a/docs/data-validation.md b/docs/data-validation.md index b2bf967c74..5208ac3063 100644 --- a/docs/data-validation.md +++ b/docs/data-validation.md @@ -4,7 +4,18 @@ description: SurveyJS lets you validate user responses before users proceed to t --- # Data Validation -SurveyJS Form Library allows you to validate user responses on the client or server side. Regardless of the type, validation activates before a user proceeds to the next page or completes the survey. If the current page contains errors, the survey indicates them and focuses the first question with an invalid answer. If you want to run validation immediately after a user answers a question, set the Survey's [`checkErrorsMode`](https://surveyjs.io/Documentation/Library?id=surveymodel#checkErrorsMode) property to `"onValueChanged"`: +Data validation ensures that respondents fill out all required form fields and the format of values is correct before they are submitted to the server. SurveyJS Form Library supports data validation on the client and server side and allows you to validate user responses immediately after an answer is entered or when respondents proceed to the next page or end the survey. Refer to the following sections for information on how to add and configure data validation in your survey: + +- [Enable Immediate Data Validation](#enable-immediate-data-validation) +- [Built-In Client-Side Validators](#built-in-client-side-validators) +- [Implement Custom Client-Side Validation](#implement-custom-client-side-validation) +- [Server-Side Validation](#server-side-validation) +- [Postpone Validation Until Survey Ends](#postpone-validation-until-survey-ends) +- [Switch Between Pages with Validation Errors](#switch-between-pages-with-validation-errors) + +## Enable Immediate Data Validation + +By default, data validation activates when a respondent proceeds to the next page. If the current page contains errors, the survey indicates them and focuses the first question with an invalid answer. If you want to run validation immediately after a respondent answers a question, set the Survey's [`checkErrorsMode`](https://surveyjs.io/Documentation/Library?id=surveymodel#checkErrorsMode) property to `"onValueChanged"`. ```js const surveyJson = { @@ -15,11 +26,7 @@ const surveyJson = { } ``` -Refer to the sections below for information on how to enable validation in your survey: - -- [Built-In Client-Side Validators](#built-in-client-side-validators) -- [Implement Custom Client-Side Validation](#implement-custom-client-side-validation) -- [Server-Side Validation](#server-side-validation) +Alternatively, you can [postpone data validation](#postpone-validation-until-survey-ends) until a respondent completes the survey. ## Built-In Client-Side Validators @@ -74,7 +81,7 @@ The following class-based validators are available: | `"answercount"` | [`AnswerCountValidator`](https://surveyjs.io/Documentation/Library?id=AnswerCountValidator) | 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 question types that can have multiple values (for instance, [Checkbox](https://surveyjs.io/Documentation/Library?id=questioncheckboxmodel)). | | `"regex"` | [`RegexValidator`](https://surveyjs.io/Documentation/Library?id=RegexValidator) | 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. | -[View Demo](https://surveyjs.io/Examples/Library?id=validators-standard (linkStyle)) +[View Demo](https://surveyjs.io/form-library/examples/javascript-form-validation/ (linkStyle)) ## Implement Custom Client-Side Validation @@ -128,7 +135,7 @@ const surveyJson = { }; ``` -[View Demo](https://surveyjs.io/Examples/Library?id=validators-custom (linkStyle)) +[View Demo](https://surveyjs.io/form-library/examples/add-custom-survey-data-validation/ (linkStyle)) ## Server-Side Validation @@ -176,7 +183,7 @@ function validateCountry(survey, { data, errors, complete }) { survey.onServerValidateQuestions.add(validateCountry); ``` -[View Demo](https://surveyjs.io/Examples/Library?id=validators-server (linkStyle)) +[View Demo](https://surveyjs.io/form-library/examples/javascript-server-side-form-validation/ (linkStyle)) Alternatively, you can use [expressions](https://surveyjs.io/Documentation/Library?id=design-survey-conditional-logic#expressions) to implement custom validation. Create an [asynchronous function](https://surveyjs.io/Documentation/Library?id=design-survey-conditional-logic#asynchronous-functions), register it, and then call it within your expression. The following code uses this technique to implement the previously demonstrated validation scenario: @@ -217,7 +224,33 @@ const surveyJson = { }; ``` -[View Demo](https://surveyjs.io/form-library/examples/validators-async-expression/reactjs (linkStyle)) +[View Demo](https://surveyjs.io/form-library/examples/javascript-async-form-validation/ (linkStyle)) + +## Postpone Validation Until Survey Ends + +Your survey can trigger data validation when a respondent clicks the Complete button. If the survey contains validation errors, it will take the respondent to the page with the first error and focus the question with the invalid answer. To activate this behavior, set the `checkErrorsMode` property to `"onComplete"`: + +```js +const surveyJson = { + "checkErrorsMode": "onComplete", + "elements": [ + // ... + ] +} +``` + +## Switch Between Pages with Validation Errors + +By default, a respondent cannot leave a page that contains validation errors. If you want to let a respondent switch between pages regardless of whether they have validation errors or not, enable the [`validationAllowSwitchPages`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#validationAllowSwitchPages) property. + +```js +const surveyJson = { + "validationAllowSwitchPages": true, + "elements": [ + // ... + ] +} +``` ## See Also diff --git a/docs/design-survey-conditional-logic.md b/docs/design-survey-conditional-logic.md index 2ea1ed6ea3..1d6a0e3327 100644 --- a/docs/design-survey-conditional-logic.md +++ b/docs/design-survey-conditional-logic.md @@ -339,7 +339,7 @@ Returns the sum of passed numbers. *Example*: `"expression": "sum({total1}, {total2})"` -[View Source Code](https://github.com/surveyjs/survey-library/blob/68eb0054dc83d2f45a6daa1042bf7440c8faf007/src/functionsfactory.ts#L247-L250 (linkStyle)) +[View Source Code](https://github.com/surveyjs/survey-library/blob/68eb0054dc83d2f45a6daa1042bf7440c8faf007/src/functionsfactory.ts#L73-L82 (linkStyle)) --- @@ -388,7 +388,6 @@ Returns the sum of numbers taken from a specified data field. This data field is *Example*: `"expression": "sumInArray({matrixdynamic}, 'total') > 1000"` [View Source Code](https://github.com/surveyjs/survey-library/blob/68eb0054dc83d2f45a6daa1042bf7440c8faf007/src/functionsfactory.ts#L164-L171 (linkStyle)) -[View Demo](https://surveyjs.io/Examples/Library?id=questiontype-expression#content-js (linkStyle)) --- diff --git a/packages/survey-angular-ui/src/page.component.html b/packages/survey-angular-ui/src/page.component.html index 68af5163f2..c8da11c14a 100644 --- a/packages/survey-angular-ui/src/page.component.html +++ b/packages/survey-angular-ui/src/page.component.html @@ -5,6 +5,7 @@
+
diff --git a/packages/survey-vue3-ui/src/Page.vue b/packages/survey-vue3-ui/src/Page.vue index 0446b2eae9..d4200ca604 100644 --- a/packages/survey-vue3-ui/src/Page.vue +++ b/packages/survey-vue3-ui/src/Page.vue @@ -4,6 +4,7 @@
+