Expression Validator with async functions


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        

//Function that returns the value on callback async
function isCountryExist(params) {
    if (params.length < 1) return false;
    var countryName = params[0];
    //If the question is empty then do nothing
    if (!countryName) {
        //It doesn't matter what the function returns. The library is wating for this.returnResult(resultValue) callback
        this.returnResult(false);
        return false;
    }
    var self = this;
    //call the ajax method
    $.ajax({url: "https://surveyjs.io/api/CountriesExample?name=" + countryName}).then(function (data) {
        var found = data.length > 0;
        // return the value into the library. Library is waiting for this callback
        self.returnResult(found);
    });
    //May return any value. The library will ignore it.
    return false;
}

// It is important to tell the library that the function is async, the last parameter
// and you will return the value on this.returnResult callback
Survey.FunctionFactory.Instance.register("isCountryExist", isCountryExist, true);

/*
If you do not need to support es5 (IE), then you may use async/await operators
async function isCountryExist(params) {
    if (params.length < 1) return false;
    var countryName = params[0];
    if (!countryName) {
        this.returnResult(false);
        return false;
    }
    var self = this;
    var res = await $.ajax({
        url: "https://surveyjs.io/api/CountriesExample"
    }).then(function(data) {
        var found = false;
        var countries = data;
        for (var i = 0; i < countries.length; i++) {
        if (countries[i].name == countryName) {
            found = true;
            break;
        }
        }
        self.returnResult(found);
    });
    return false;
}
*/

                
                    var json = {
  elements: [
    {
      type: "text",
      name: "country",
      title: "Type a country:",
      validators: [
        {
          type: "expression",
          expression: "isCountryExist({country}) = true",
          text: "Please type the country correctly"
        }
      ]
    },
    {
        type: "comment",
        name: "aboutCountry",
        title: "Please tell us about country: '{country}'",
        visibleIf: "isCountryExist({country}) = true"
    }
  ]
};

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

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Expression Validator with async functions, Reactjs Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.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-react-ui/survey-react-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%;">
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.