Custom Form Validation Using Expressions


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        

function isDomainValid([ email ]) {
  if (!email)
    return;
  
  const domain = email.trim().substring(email.indexOf("@") + 1);
  return domain === "surveyjs.io";
}

Survey.FunctionFactory.Instance.register("isDomainValid", isDomainValid);

                
                    var json = {
  "checkErrorsMode": "onValueChanged",
  "elements": [
    {
      "type": "text",
      "name": "email",
      "isRequired": true,
      "title": "Enter your work e-mail address",
      "validators": [{
        "type": "expression",
        "expression": "isDomainValid({email})",
        "text": "Please enter an e-mail address hosted at surveyjs.io."
      }]
    }
  ],
  "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>Add Custom Survey Data Validation, Knockoutjs Example | SurveyJS</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>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

Custom JavaScript validation for forms allows you to create more specific input validation logic than built-in validators. SurveyJS Form Library supports two ways to add custom validation—with an event or expressions. This example demonstrates how to configure expressions. Switch between React, Vue, Knockout, jQuery, and Angular to view the example for your JavaScript framework.

Event vs Expressions

For custom form 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 custom form validation with the onValidateQuestion 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: Custom Form Validation Using an Event.

Implement a Custom Validator

Follow the steps below to implement a custom validator:

  1. Create a JavaScript function that validates data.
    This function should return a Boolean value that indicates a validation result (true if the value is valid, false otherwise).

  2. Register the function in FunctionFactory.
    The following code registers the myFunc function under the name foo:

    import { FunctionFactory } from "survey-core";
    FunctionFactory.Instance.register("foo", myFunc);
    
  3. Use the validator within expressions.
    To reference the validator within an expression, use curly brackets: {foo}.

In this custom form validation example, the form field accepts only e-mail addresses hosted at surveyjs.io. The isDomainValid custom validator checks whether the entered e-mail address is valid. If the validation fails, the form field displays an error message. 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.

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.