Form Validation
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 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 and maxValue. Alternatively, you can set the min and 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 and 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 or more choices than specified by maxCount. Applies only to the question types that can have multiple values (for instance, Checkbox). |
"regex" |
Throws an error if an entered value does not match a regular expression defined in the regex property. |
"expression" |
Throws an error when the expression evaluates to false (see 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 property. If you want to override the default validation message, set the requiredErrorText property. You can also specify the required state dynamically based on a condition. Use the requiredIf property to do this. Refer to the following help topic for more information: 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 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.