Server-Side Form Validation Using Expressions


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        

function doesCountryExist([ countryName ]) {
  if (!countryName) {
    this.returnResult();
    return;
  }
  fetch("https://surveyjs.io/api/CountriesExample?name=" + countryName)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => {
      const found = data.length > 0;
      this.returnResult(found);
    });
}

Survey.FunctionFactory.Instance.register("doesCountryExist", doesCountryExist, true);

                
                    var json = {
  "checkErrorsMode": "onValueChanged",
  "elements": [{
    "type": "text",
    "name": "country",
    "title": "Enter a country",
    "isRequired": true,
    "validators": [{
      "type": "expression",
      "text": "Country is not found",
      "expression": "doesCountryExist({country})"
    }]
  }],
  "showQuestionNumbers": false
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
            
                ko.applyBindings({ model: survey }, document.getElementById("surveyElement"));

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Async Form Validation Using Expressions | Knockoutjs Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
                    <survey params="survey: model"></survey>
                            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

Sorry, we can't retrieve the data from server. Please comeback later.

Server-side form validation allows you to send user input to a server, check if the value is valid, and display the validation result on the client as an error message. In SurveyJS Form Library, you can implement server-side input validation in two ways—with an event or expressions. This example demonstrates validation with expressions. Select React, Vue, Knockout, jQuery, or Angular to view an example for your JavaScript framework.

For asynchronous validation with expressions, you need to implement and register a custom validator in your JavaScript code to make the validator available within expressions. Users cannot modify the validator, but they can decide whether or not to use it in their expressions when they design their surveys and thus enable or disable custom validation.

For asynchronous validation with the onServerValidateQuestions event, you need to implement a corresponding event handler. Users have no access to this handler and therefore cannot disable custom validation. Refer to the following demo for more information: Server-Side Form Validation Using an Event.

The onServerValidateQuestions event occurs only when a user proceeds to the next survey page or completes the survey. This behavior does not allow you to validate user input immediately after a user enters a value. Expressions, on the other hand, do support immediate validation.

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 the this.resultData method with a Boolean value that indicates a validation result.
Register the function in FunctionFactory.
The following code registers the myFunc function under the name foo. 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 doesCountryExist custom validator 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.

Server-Side Form Validation Using Expressions

Event vs Expressions

Implement a Custom Async Validator

Server-Side Form Validation Using Expressions

Why we use cookies.