Form Input Validation: Ensure Valid, Meaningful, and Reliable Responses in Questionnaires and Online Forms
Tags: inputvalidation, validation, surveying, javascript
Published: 2023-03-23 08:44:16

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

![SurveyJS: Form Input Validation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jji0928f0i2589t8li2f.png)

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](https://medium.com/@surveyjs/how-to-create-an-effective-survey-poll-or-quiz-and-increase-its-completion-rate-cce30282659f) 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](https://surveyjs.io/), 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](https://surveyjs.io/form-library/documentation/overview). SurveyJS offers a variety of input validation options that can help ensure that respondents provide valid answers. 

### Mandatory Questions

Set the [isRequired](https://surveyjs.io/form-library/documentation/api-reference/question#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
}
```

![SurveyJS: Required Questions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a35n5rcq3bg1lpfkbu5.png)
[Demo: COVID-19 Screening Form](https://surveyjs.io/form-library/examples/covid-19-screening-form-template/reactjs) 


If you use [Single-Choice Matrix](https://surveyjs.io/form-library/examples/single-selection-matrix-table-question/reactjs) and you want to ensure that a user addresses all question in the rows, enable the [isAllRowRequired](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-question-model#isAllRowRequired) option.

![SurveyJS: Required Matrix Rows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ppxb8myyv2li5tdqbji.png)
[Demo: Single-Selection Matrix](https://surveyjs.io/form-library/examples/single-selection-matrix-table-question/reactjs)


### 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](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model) and [TagBox](https://surveyjs.io/form-library/documentation/api-reference/dropdown-tag-box-model#maxSelectedChoices) 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
}
```

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

![SurveyJS: Limit Selected Choices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7na6qir7v40f720iulim.png)

### 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
}
```

![SurveyJS: Numeric Range Validation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lzhzz9hn84za9r18oam.png)

[Demo: Numeric Entry](https://surveyjs.io/form-library/examples/numeric-entry-question/reactjs)


### 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
    }
  ]
}
```

![SurveyJS: Minimum Text Length Validation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r52ncduz5qszxt0zm0lq.png)

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
}
```

![SurveyJS: Maximum Text Length Validation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3372lou75isgkc0vm6n.png)

### 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
}
```

![SurveyJS: Upload File Size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsg837bq3ce8xbx307ts.png)

[Demo: File question - Upload Files to a Server](https://surveyjs.io/form-library/examples/file-upload/reactjs#content-code)

### Accepted File Types
When configuring a File question type, use the [acceptedTypes](https://surveyjs.io/form-library/documentation/api-reference/file-model#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"
    }
  ]
}
```

![SurveyJS: RegEx Text Validation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0isbdcxo5tyfysk40ql.png)

[Demo: Form Validation](https://surveyjs.io/form-library/examples/javascript-form-validation/reactjs)


### 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](https://surveyjs.io/form-library/examples/add-custom-input-validation/reactjs)


### 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](https://surveyjs.io/form-library/examples/javascript-server-side-form-validation/reactjs)

## 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](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#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.