Tired of dealing with invalid data submitted by users in your web forms? Then it's time for you to introduce input validation into your form creation workflow. In this article, we will explore pros and cons of client- and server-side validation features that SurveyJS has to offer, so that you can decide which one to use in your project.

Client-side validation is executed in the user's web browser before a questionnaire is submitted. This allows a user to make required modifications to the input right after it's been entered, so that they don't have to get back to certain questions after the form submission.

Overall, this approach has several advantages, including:

• Improved User Experience
  Client-side validation allows for instant feedback to the user. If users enter incorrect data, they are notified immediately without having to wait for the server to respond.

• Reduced Server Load
  With client-side validation, the server only receives valid data, which reduces the load on the server.

• Faster Response Time
  Because client-side validation occurs on the user's computer, users immediately see the results and experience no delay compared to server-side validation.

Unfortunately, client-side validation can be bypassed by users who disable JavaScript or use tools to manipulate the HTML code, so it should not be the only form of validation used. Client-side validation also has some drawbacks:

• Security Risks
  Since client-side validation is performed on the user's computer, it is vulnerable to tampering by malicious users. This means that attackers could bypass the validation process and submit malicious data.

• Limited Validation Capabilities
  Client-side validation can only validate data that is visible to the user. This means that some data, such as hidden expressions and calculated values, cannot be validated.

SurveyJS offers robust client-side validation capabilities that you can configure in a survey JSON schema. Validation options include mandatory questions, regex validation, numerical validation, custom validation functions, and others. For more information, please read the following blog post: Form Input Validation: Ensure Valid, Meaningful, and Reliable Responses in Questionnaires and Online Forms.

Server-side validation allows you to perform a server-side / API call and validate user input on the server after it has been submitted by the user. This approach has the following advantages:

• Increased Security
  Since server-side validation occurs on the server, it is less vulnerable to tampering.

• Comprehensive Validation
  Server-side validation can validate all data, including data that is hidden or encrypted.

• Consistent Validation
  Server-side validation ensures that all data is validated in the same way, regardless of the user's computer or browser.

Nevertheless, server-side validation also has some drawbacks, including:

• Slower Response Time
  Because server-side validation occurs on the server, there is more latency compared to client-side validation. This means that users may have to wait longer for feedback on their input.

• Increased Server Load
  With server-side validation, the server has to process all submitted data, even if it is invalid. This can increase the load on the server.

If your form requires a request to a server to validate user input, handle the onServerValidateQuestions event to make this request.

View Demo: Server-Side Form Validation Using an Event

When it comes to building surveys using no-code Survey Creator, survey creators have no access to JavaScript code and therefore cannot unsubscribe from the onServerValidationQuestions event and disable custom validation. To give survey creators full control over the questionnaire design and validation, you can create an asynchronous function that would call an API and validate user input. Register the function in a survey function factory for survey creators to call the custom function in expressions when they validate question values. This option gives advantages to survey creators, as they can now decide whether to use a custom server-side validation function in survey expressions or not.

View Demo: Server-Side Form Validation Using Expressions

Both client-side and server-side validation have their advantages and disadvantages. In general, it is recommended to use both client-side and server-side validation for maximum security and usability. Client-side validation can provide instant feedback to the user, while server-side validation can ensure that all data is validated correctly. By combining both approaches, you can create a robust validation system that ensures the integrity and security of your data.