Form Validation


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    var json = {
  "checkErrorsMode": "onValueChanged",
  "elements": [{
    "name": "numericvalidator",
    "type": "text",
    "title": "Numeric Validator",
    "description": "Enter a number within the range of 0 to 100",
    "isRequired": true,
    "validators": [{
      "type": "numeric",
      "text": "Value must be within the range of 0 to 100",
      "minValue": 0,
      "maxValue": 100
    }]
  }, {
    "name": "textlengthvalidator",
    "type": "comment",
    "title": "Text Length Validator",
    "description": "Enter text no shorter than 10 and no longer than 280 symbols",
    "isRequired": true,
    "validators": [{
      "type": "text",
      "minLength": 10,
      "maxLength": 280
    }]
  }, {
    "name": "emailvalidator",
    "type": "text",
    "title": "E-mail Validator",
    "description": "Enter an e-mail address",
    "isRequired": true,
    "validators": [
      { "type": "email" }
    ]
  }, {
    "name": "answercountvalidator",
    "type": "checkbox",
    "title": "Answer Count Validator",
    "description": "Select between two to four options",
    "isRequired": true,
    "choices": [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4",
      "Option 5",
      "Option 6"
    ],
    "colCount": 2,
    "validators": [{
      "type": "answercount",
      "minCount": 2,
      "maxCount": 4
    }]
  },{
    "name": "regexvalidator",
    "type": "text",
    "title": "RegEx Validator",
    "description": "Enter a password that contains at least one upper-case, one lower-case letter, a digit, and a special character",
    "isRequired": true,
    "validators": [{
      "type": "regex",
      "regex": /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)(?=.*[!-@#$*])/,
      "text": "Your password must contain at least one upper-case, one lower-case letter, a digit, and a special character"
    }]
  }, {
    "name": "expressionvalidator",
    "type": "multipletext",
    "title": "Expression Validator",
    "description": "Specify a range of numbers",
    "isRequired": true,
    "items": [{
      "name": "minvalue",
      "title": "Minimum value",
      "isRequired": true,
      "validators": [
        { "type": "numeric" }
      ]
    }, {
      "name": "maxvalue",
      "title": "Maximum value",
      "isRequired": true,
      "validators": [
        { "type": "numeric" }
      ]
    }],
    "validators": [{
      "type": "expression",
      "expression": "{expressionvalidator.minvalue} < {expressionvalidator.maxvalue} or {expressionvalidator.minvalue} empty or {expressionvalidator.maxvalue} empty",
      "text": "The minimum value must not exceed the maximum value"
    }]
  }],
  "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>JavaScript Form 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>

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

User input validation is used to ensure that respondents fill out all required form fields and the format of values is correct before they are submitted to the server. This example demonstrates how to configure built-in client-side form input validation.

SurveyJS Form Library supports multiple validator types. Most of them are configured in the validators array. Add one or more objects to it and set their type property to one of the validator types listed in the table below. Refer to the Description column for information on other properties applicable to a specific validator type. All types also support the text property that allows you to override default validation messages.

`type`	Description
`"numeric"`	Throws an error if the answer is not a number or if an entered number is outside the range between `minValue` and `maxValue`. Alternatively, you can set the `min` and `max` properties in the question object to specify the range.
`"text"`	Throws an error if the length of entered text is outside the range between `minLength` and `maxLength`.
`"email"`	Throws an error if an entered value is not a valid e-mail address.
`"answercount"`	Throws an error if a user selects fewer choices than specified by `minCount` or more choices than specified by `maxCount`. Applies only to the question types that can have multiple values (for instance, Checkbox).
`"regex"`	Throws an error if an entered value does not match a regular expression defined in the `regex` property.
`"expression"`	Throws an error when the `expression` evaluates to `false` (see Expressions).

SurveyJS Form Library also supports a Required validator. It throws an error if the answer is empty. Unlike other validator types, the Required validator cannot be configured in the validators array. To add the Required validator to a question, enable the question's isRequired property. If you want to override the default validation message, set the requiredErrorText property. You can also specify the required state dynamically based on a condition. Use the requiredIf property to do this. Refer to the following help topic for more information: Conditional Visibility.

This demo shows form validation examples where each question uses one of the validator types from the table above to validate user input. Question descriptions explain which values are considered valid. Enter invalid values to ensure that data validation works. In addition, all questions have the Required validator. Leave one or more form fields empty and click Complete. You will see a validation error.

In this demo, validation is triggered immediately after you answer a 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.

Form Validation

Why we use cookies.