Data Validation
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. formJS 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 form. Refer to the following sections for information on how to add and configure data validation in your form:
- Enable Immediate Data Validation
- Built-In Client-Side Validators
- Postpone Validation Until form Ends
- 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 form indicates them and focuses the first question with an invalid answer. If you want to run validation immediately after a respondent leaves an input field, set the form's checkErrorsMode property to "onValueChanged". In addition, you can set the textUpdateMode property to "onTyping" if you want to validate text input while users are typing.
const formJson = {
"checkErrorsMode": "onValueChanged",
"textUpdateMode": "onTyping",
"elements": [
// ...
]
}
Alternatively, you can postpone data validation until a respondent completes the form.
Built-In Client-Side Validators
formJS Form Library supports multiple built-in client-side validators. The Required validator ensures that a question value is not empty. Enable a question's isRequired property to add the Required validator to this question. In addition, you can specify the requiredErrorText property to override the default error message:
const formJson = {
"elements": [{
"name": "question1",
"type": "text",
"isRequired": true,
"requiredErrorText": "Value cannot be empty"
}]
}
If you want to specify the required state dynamically based on a condition, use the requiredIf property. Refer to the following help topic for more information: Conditional Visibility.
Other validators are implemented as JavaScript classes. You can declare the validators array in the form JSON schema:
const formJson = {
"elements": [{
"name": "question1",
"type": "text",
"validators": [
{ "type": "numeric", "text": "Value must be a number" }
]
}]
}
The following class-based validators are available:
| type (for JSON) | Validator Class (for JavaScript) | Description |
| "numeric" | NumericValidator | Throws an error if the answer is not a number or if an entered number is outside the minValue and maxValue range. Alternatively, you can set the min and max properties in the question object to specify the range. |
| "text" | TextValidator | Throws an error if the length of entered text is outside the range between minLength and maxLength. |
| "email" | EmailValidator | Throws an error if an entered value is not a valid e-mail address. |
| "expression" | ExpressionValidator | Throws an error when the expression evaluates to false |
| "answercount" | AnswerCountValidator | Throws an error if a user selects fewer choices than specified by minCount or more choices than specified by maxCount. Applies only to question types that can have multiple values (for instance, Checkbox). |
| "regex" | RegexValidator | Throws an error if an entered value does not match a regular expression defined in the regex property. |
Postpone Validation Until form Ends
Your form can trigger data validation when a respondent clicks the Complete button. If the form 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":
const formJson = {
"checkErrorsMode": "onComplete",
"elements": [
// ...
]
}