Validation Types

Server and Client validation

Validation should always be implemented on both the server and client. Server-side validation is needed to sanitize user inputs so that information is safe. Client-side validation provides better user experience by offering immediate feedback that help users correct issues immediately.

Server-Side validation

1. The form information is sent to the server and validated.
2. If the validation fails, the response is sent back to the client, the page containing the form is refreshed and feedback shown.
3. After correcting errors, the user resends the form to the server for validation.

Benefits

• Secure validation that can't easily be bypassed by malicious users.
• Easy to provide persistent feedback. For example, a form is submitted to the server and the user navigates to another page before validation is complete. Sever-side validation can allow us to:
  • Display a feedback message on the page when the user returns.
  • Send an email to the user with validation feedback.

Drawbacks

• Users must fill all the information and submit it to the server before they get feedback.
• Server response may delay feedback as the information is being validated.

Client-side validation

1. The form information is validated on the browser. If validation fails, feedback is shown on the the webpage containing the form.
2. After correcting errors, the browser validates the form again. The information gets sent to the server once validation is successful.

Benefits

• Feedback is provided in near real-time.
• User input can be validated as users types; fixes can be immediate

Drawbacks

• Unsecure validation. It's easy to turn off browser scripts and bypass the validation.
• Not valuable when access to the server is needed to validate user's input. For example: checking if a username is already in use requires access to the server.
• Can't provide feedback that persists on the page if the user navigates away.

Real-time validation and validation on Submit

The above GIF demonstrates combining real-time validation and validation on Submit

1. Clicking Login triggers validation on Submit, errors are displayed.
2. As the user types to correct the errors, real-time validation is triggered with every key-stroke. Once the error is corrected, the error message disappears.

Real-time validation

Validation and feedback is provided as users are filling a form field. It can be implemented during typing or after the field loses focuses or both. Typical of client-side validation but can also be used to for server-side validation.

Benefits

• Immediate feedback is provided to the user.

Drawbacks

• Can be distracting if overused, misused or badly implemented.
• Not valuable when validation can take more than 1 second.

Validation on Submit

Triggered when users hit the form's submit button. The submit button is often Save but can be something else. Feedback is then returned and displayed to users. If errors exist, they are displayed to the user. Typical of server-side validation but can also be used for client side validation.

Benefits

• Users are able to fill forms without any interruption.
• Required fields that are empty can be caught.
• Valuable when validation can take more than 1 second.

Drawbacks

• Users will be able to fix errors only after they try to submit the form and get the response back from the server.