Server-Side Form Validation Using an Event


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        

function validateCountry(_, { data, errors, complete }) {
  const countryName = data["country"];
  if (!countryName) {
    complete();
    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;
      if (!found) {
        errors["country"] = "Country is not found";
      }
      complete();
    });
}

                
                    var json = {
  "elements": [
    {
      "type": "text",
      "name": "country",
      "title": "Enter a country",
      "isRequired": true
    }
  ],
  "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);
            });
        
survey.onServerValidateQuestions.add(validateCountry);        
            var app = new Vue({
            el: '#surveyElement',
            data:
            {
            survey: survey
            }
            });

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Server-Side Form Validation Using an Event, Vuejs Example | SurveyJS</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.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-vue-ui/survey-vue-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 :survey='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 the onServerValidateQuestions event or expressions. This example demonstrates how to handle the event. Switch between React, Vue, Knockout, jQuery, and Angular to view the 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. Refer to the following demo for more information: Server-Side Form Validation Using Expressions.

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.

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 (see the checkErrorsMode property description).

An onServerValidateQuestions event handler accepts the survey as the first argument and an object with the following fields as the second argument:

data - An object that contains question values.
errors - An object for your error messages. Set error messages as follows: errors["questionName"] = "My error message";
complete() - A method that you should call when the request to the server has completed.

In this server-side validation example, you should enter a country name into the form field. A callback assigned to the onServerValidateQuestions event handler 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.

Server-Side Form Validation Using an Event

Event vs Expressions

Handle the `onServerValidateQuestions` Event

Server-Side Form Validation Using an Event

Why we use cookies.