-
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
Custom Form Validation Using an Event
Survey.StylesManager.applyTheme("defaultV2");
function validateDomain(_, options) {
if (options.name === "email") {
const email = options.value;
if (!email)
return;
const domain = email.trim().substring(email.indexOf("@") + 1);
if (domain !== "surveyjs.io") {
options.error = "Please enter an e-mail address hosted at surveyjs.io.";
}
}
}
var json = {
"checkErrorsMode": "onValueChanged",
"elements": [
{
"type": "text",
"name": "email",
"isRequired": true,
"title": "Enter your work e-mail address"
}
],
"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.onValidateQuestion.add(validateDomain);
$("#surveyElement").Survey({
model: survey
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Custom Input Validation to a Form, jQuery Example | SurveyJS</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/jquery"></script>
<script src="/DevBuilds/survey-jquery/survey.jquery.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/javascript" src="./index.js"></script>
</body>
</html>
Custom JavaScript validation for forms allows you to create more specific input validation logic than built-in validators. In SurveyJS Form Library, you can add custom validation in two ways—with the onValidateQuestion
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.
Event Handler vs Expressions
Event Handler
To create custom form validation in JavaScript 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.
Expressions
For custom 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: Custom Form Validation Using Expressions.
Handle the onValidateQuestion
Event
An onValidateQuestion
event handler accepts the survey as the first argument and an object with the following fields as the second argument:
question
- The question being validated.name
- The question's name.value
- A question value being validated.error
- An error message that you should specify if validation fails.
In this custom form validation example, the form field accepts only e-mail addresses hosted at surveyjs.io
. A callback attached to the onValidateQuestion
event handler validates the entered e-mail address and assigns an error message to the options.error
field if the address is invalid.
The onValidateQuestion
event may occur and run validation at different points in your application, depending on the checkErrorsMode
property. In this demo, the event occurs immediately after you change the form field value because checkErrorsMode
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