DEV Community

SurveyJS for _SurveyJS

Posted on • Updated on

Form Input Validation: Ensure Valid, Meaningful, and Reliable Responses in Questionnaires and Online Forms

Learn how to design an effective questionnaire and configure form field validation to improve the quality of your survey results.

SurveyJS: Form Input Validation

A thoughtfully designed questionnaire can improve its completion rate and deliver a positive user experience. If your survey is clear and well structured, and questions are concise, survey takers will be willing to provide relevant and actionable data that you can use to derive valuable insights.

But how do you accomplish this? How do you organize an online questionnaire that doesn't overwhelm respondents and instead makes their experience enjoyable?

Proper Completion Time

Designing a questionnaire requires careful consideration of various factors. One of them is completion time, especially when it comes to online surveys. To maximize participation rates, limit the survey to no more than 10 minutes, or even shorter for mobile device users - around 7 minutes.

Suitable Question Types

Another critical aspect is selecting appropriate question types to ensure that the data collected will be suitable for further analysis and visual representation. Please refer to the How to Create an Effective Survey, Poll, or Quiz, and Increase its Completion Rate article to find out more on this topic.

Relevant Responses

Data validity is another key factor to consider when designing a questionnaire. To ensure reliable data, identify the types of data you want and do not want to receive. This approach can help avoid uncertainties by clarifying the data expected from respondents.

Different fields require different types of validation: validation for mandatory fields, numeric range validation for age or weight values, and file type validation for uploads in a specific file format, such as PDF, JPEG, or MP4.

Using SurveyJS, you can apply these and other data validation settings to your survey questions, ensuring that respondents provide accurate and reliable data. In the following sections, we will review some possible data validation options available with SurveyJS, which can help improve the quality of your survey data.

Form Input Validation with SurveyJS

SurveyJS is an open-source JavaScript library for building complex forms and surveys in React, Angular, Vue.js, Knockout, and jQuery. SurveyJS offers a variety of input validation options that can help ensure that respondents provide valid answers.

Mandatory Questions

Set the isRequired property value to true to ensure that a user doesn't leave a question unanswered before submitting a survey.

{
  "type": "text",
  "name": "last-name",
  "title": "Last name",
  "isRequired": true
}
Enter fullscreen mode Exit fullscreen mode

SurveyJS: Required Questions
Demo: COVID-19 Screening Form

If you use Single-Choice Matrix and you want to ensure that a user addresses all question in the rows, enable the isAllRowRequired option.

SurveyJS: Required Matrix Rows
Demo: Single-Selection Matrix

Restrict the Number of Choices to Select

If you want to limit the number of choice options a respondent can select in Multiple-Selection Checkbox and TagBox questions, you can use the maxSelectedChoices property.

{
  "type": "checkbox",
  "name": "product-aspects",
  "title": "Key Features",
  "description": "These are some important aspects of the product. Select three features you find most important.",
  "choices": [
    "Technical support",
    "Price",
    "Delivery option",
    "Quality",
    "Ease of use",
    "Product warranties"
  ],
  "maxSelectedChoices": 3
}
Enter fullscreen mode Exit fullscreen mode

Once a user selects the maximum number of items allowed, further selection is disabled for that question.

SurveyJS: Limit Selected Choices

Numeric Ranges

You can use the min and max properties to set numeric ranges for questions that require a numerical input type.

{
  "name": "number",
  "type": "text",
  "title": "Enter a number from 0 to 100",
  "inputType": "number",
  "min": 0,
  "max": 100,
  "defaultValue": 0,
  "isRequired": true
}
Enter fullscreen mode Exit fullscreen mode

SurveyJS: Numeric Range Validation

Demo: Numeric Entry

Text Length

By setting the minimum or maximum length values for text entry fields, you can control the number of characters users can enter.

The minimum text length value can help ensure that users provide enough data and prevent them from submitting invalid and eventually useless responses.

{
  "type": "comment",
  "name": "service_improvements",
  "title": "How can we improve our service?",
  "validators": [
    {
      "type": "text",
      "text": "Please provide more information",
      "minLength": 10
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

SurveyJS: Minimum Text Length Validation

Setting the maximum text length value, on the other hand, can help prevent users from submitting redundant details in their answers. This will keep survey responses concise and focused on relevant information.

{
  "type": "comment",
  "name": "service_improvements",
  "title": "How can we improve our service?",
  "maxLength": 100
}
Enter fullscreen mode Exit fullscreen mode

SurveyJS: Maximum Text Length Validation

Maximum File Size

You can limit the size of files that can be uploaded as responses to questions.

{
  "type": "file",
  "title": "Please upload your files",
  "name": "files",
  "storeDataAsText": false,
  "allowMultiple": true,
  "maxSize": 102400
}
Enter fullscreen mode Exit fullscreen mode

SurveyJS: Upload File Size

Demo: File question - Upload Files to a Server

Accepted File Types

When configuring a File question type, use the acceptedTypes property to restrict the file types that can be uploaded.

Regular Expressions

You can use regular expressions to implement more sophisticated logic and validate such input values as email addresses, phone numbers, or passwords.

{
  "name": "user-password",
  "type": "text",
  "title": "Password",
  "inputType": "password",
  "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"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

SurveyJS: RegEx Text Validation

Demo: Form Validation

Custom Validation Functions

Validation functions can be useful in verifying more detailed responses. For instance, when it comes to email address, you may want to validate not only that the entered value conforms to the email format but also that it belongs to the domain of a specific company.

Demo: Custom Form Validation Using an Event

Server-Side Validation

Use server-side validation in addition to client-side validation to prevent malicious submissions or errors.

Demo: Server-Side Form Validation Using an Event

Summary

Consider the following recommendations to ensure that respondents provide accurate data while taking your survey.

Validate All Fields

Ensure that all fields have validation on, including optional fields. This helps prevent incomplete submissions and errors and ensures that most of the information provided is valid.

Provide Help Text

SurveyJS highlights a field with an error and displays an error message next to this field.

In addition, you can customize error messages and provide clear instructions on fixing the error. Use plain language and avoid technical jargon.

Use Real-Time Validation

Real-time validation helps users correct errors as they type rather than waiting until the form is submitted. Set the checkErrorsMode property to onValueChanged to validate user responses as soon as users provide answers.

Lastly, always test your survey with a small group of people (ideally - from the intended target group). This ensures that the survey is clear and easy to understand and can help detect and correct errors or ambiguities in questions and choice options before it reaches the main target audience.

Conclusion

Designing effective surveys requires both skill and creativity. SurveyJS offers a wide selection of tools to help you create more engaging and insightful surveys and online forms.

Top comments (0)