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 leave the 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.