-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Radio group with Custom Item Template
-
Drop-Down Menu
-
Dropdown: Load Data from Web Services
-
Dropdown with Custom Item Template
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature Pad
-
Multiple Text
-
Rating
-
Ranking
-
Comment
-
Image
-
Html
-
File
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Piped Text
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
VisibleIf
-
Simplify Cascade Conditions
-
Complex questions in expressions
-
Use custom function in expressions
-
Create custom condition/expression properties
-
Conditions in dynamic questions
-
Show/Hide choices in radiogroup/checkbox/dropdown
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Show/Hide columns/rows in matrix question
-
Show/Hide rows in matrix dropdown question
-
EnableIf
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage
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>
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.
-
Templates
-
Simple Questions
-
Text Entry
-
Date-Time Entry
-
Numeric Entry
-
Color Input
-
Radio Button Group
-
Radio group with Custom Item Template
-
Drop-Down Menu
-
Dropdown: Load Data from Web Services
-
Dropdown with Custom Item Template
-
Dropdown with Lazy Loading
-
Multi-Select Dropdown
-
Checkboxes
-
Carry Forward Responses
-
Image Picker
-
Yes/No Question
-
Signature Pad
-
Multiple Text
-
Rating
-
Ranking
-
Comment
-
Image
-
Html
-
File
-
Expression
-
Expression (using async functions)
-
-
Matrix Table Questions
-
Panel & Dynamic Panel
-
Survey
-
Title and Logo
-
Questions in one line
-
Survey Options
-
Auto-Populate Form Fields
-
Piped Text
-
Edit saved survey
-
Read-only/display mode
-
Show Preview before complete
-
Pop-Up Survey
-
Context actions in element titles
-
Modify title tags
-
Custom render of survey elements
-
File - custom preview
-
File - delayed upload
-
Lazy questions rendering
-
-
Quizzes and Scored Surveys
-
Integration with Third-Party Libraries
-
Appearance customization
-
Navigation
-
Conditions and Triggers
-
VisibleIf
-
Simplify Cascade Conditions
-
Complex questions in expressions
-
Use custom function in expressions
-
Create custom condition/expression properties
-
Conditions in dynamic questions
-
Show/Hide choices in radiogroup/checkbox/dropdown
-
Show/Hide individual items in radiogroup/checkbox/dropdown
-
Show/Hide columns/rows in matrix question
-
Show/Hide rows in matrix dropdown question
-
EnableIf
-
Complete Trigger
-
CopyValue Trigger
-
SetValue Trigger
-
Run Expression Trigger
-
-
Text Formatting
-
Survey Localization
-
Input Validation
-
SurveyJS Storage