-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
Server-Side Form Validation Using Expressions
This example demonstrates how you can build a validation expression that processes user input on the server side. You need to register a custom function that can be used in expressions. Such a function can query the server. SurveyJS also allows you to validate input in an event handler. This article explains the difference between server-side input validation using expressions and an event handler. Select React, Vue, Knockout, jQuery, or Angular to view an example for your JavaScript framework of choice.
Event Handler vs Expressions
Event Handler
You can validate user input in the onServerValidateQuestions
event handler. Survey authors have no access to this handler and therefore cannot disable custom validation. The event handler is executed on navigation to the next page and on survey completion. This behavior does not allow for immediate validation. Refer to the following demo for more information: Server-Side Form Validation Using an Event.
Expressions
If you want to query the server from an expression, implement and register a custom validator in your JavaScript code. Survey authors cannot modify the validator, but they can decide whether or not to use it in their expressions when they design their surveys. Immediate validation is available.
Implement a Custom Async Validator
Follow the steps below to implement a custom asynchronous validator:
Create a JavaScript function that validates data.
This function should perform an asynchronous operation, for example, send a request to a server. Once the operation is complete, call thethis.resultData
method with a Boolean value that indicates a validation result.Register the function in
FunctionFactory
.
The following code registers themyFunc
function under the namefoo
. The third parameter specifies that this function is asynchronous:import { FunctionFactory } from "survey-core"; FunctionFactory.Instance.register("foo", myFunc, true);
Use the validator within expressions.
To reference the validator within an expression, use curly brackets:{foo}
.
In this server-side validation example, you should enter a country name into the form field. The custom validator (doesCountryExist
) will fetch a list of countries and check whether the entered country is in it. If the country is not found, the form field will display a validation error. Validation is triggered immediately after you answer the question 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.
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Dropdown
-
Dropdown: Load Data from Web Services
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature
-
Multiple Textboxes
-
Rating Scale
-
Rating Scale UI Adaptation Modes
-
Ranking
-
Long Text
-
Image
-
HTML
-
File Upload
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Merge Question Values
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Customize Rendering
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
Conditional Visibility
-
Simplify Cascade Conditions
-
Dynamic Default Question Values
-
Complex Questions in Expressions
-
Custom Functions in Expressions
-
Implement a Custom Expression Property
-
Dynamic Questions with Conditional Logic
-
Hide Question Elements (Rows, Columns, Choices)
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Hide Rows and Columns in a Matrix Table
-
Hide Rows and Columns in a Matrix Dropdown Question
-
Conditional Logic to Enable or Disable Questions
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage