Validations are used to check the accuracy, integrity, and structure of data before it is used for a company's services. If any user sends unacceptable data to any application, then the application will send validation messages either from the client side or the server side.
Understanding front-end validation
The frontend is nothing but what a user sees on the website/ application. Front-end testing validates that GUI elements are functioning as expected / as per the requirement.
Consider an example of a form where it checks whether input fields accept the right characters, or whether forms are being submitted only after the required fields are filled, or whether navigation is easy enough, or whether the page is loading fast enough.
Front-end validation scenario
Uploading a file validation (format)
Consider a form where the user has to add a file of only .gif, .png, .jpg, .jpeg formats. If the user adds any image/document other than this format, the form must throw an error message.
In this case, the client will send a validation error message. As this is a small validation, it will happen on the client side.
Uploading a file validation (size)
Consider another example of adding a file size of more than the given limit. It will show an error message that the file size should not be more than the given limit. This validation is also handled by the client side.
Filling signup form on Facebook validation
To see how the front-end validation of Facebook signup works, we need to inspect the element and switch to the network tab.
- Don’t enter any value in the fields of the signup form and verify whether it is throwing an error message.
- In the network tab, observe no request is getting hit. This means the error is coming from the client side.
- The error is getting thrown before the data is sent to the server side.
Understanding back-end validation
The backend is named because it does not run on the device (mobile/laptop) but on a remote server.
Back-end testing validates the database side of web applications or software. Consider an example of a form where it checks if an email ID input field is not accepting duplicate entries.
Suppose a user has already entered an email ID while submitting a form. When the same email ID is entered while submitting a new form, the user must get an error that the user with this email ID already exists.
Back-end validation scenarios
Credit card validation
Suppose we are on a payment gateway and we are asked to enter details of a credit/debit card. Now, when the user enters data in it and clicks on the ‘Submit’ button, we see a loading button, and after that the ‘Credit card is not valid' message. This means the system has checked from the backend if the credit card details are correct using APIs.
Existing email ID validation
Consider another example of a user details form, where the user enters the email address of an already registered user and clicks on the Continue button. An error message is displayed on the server side. The application checks if an email address is already present in the database, and if present, the user gets an error message that the email ID is already registered.
Google validation using an ID token
Let us explore another example of how we can create an account on apps like Spotify or LinkedIn by logging in with Google or Facebook.
If we open any website app and click on the Login button, we get an option to log in with Google/Facebook/Email for registering or creating a new account.
If we want to create a new account, we will click on the login button. Here we will get options to log in with Google/Facebook/Email button.
If you use Google Sign-In with an app or site that communicates with a backend server, you need to understand the below steps happening in the backend:
- The currently signed-in user on the server.
- After a user successfully signs in, the user's ID token is sent to your server using an HTTPS POST request for secure sign in. Then the user is validated.
- The integrity of the ID token is validated on the server and the user information contained in the token is used to establish a session or to create a new account.
An easy way to validate an ID token is to use the tokeninfo endpoint. This endpoint sends an additional network request that does most of the validation for you while you test proper validation. To validate an ID token using the tokeninfo endpoint, make an HTTPS POST or GET request to the endpoint, and pass your ID token in the id_token parameter.
For example, to validate the token "XYZ423", make the following GET request: https://oauth2.googleapis.com/tokeninfo?id_stoken=XYZ423.
If the token is properly signed, you will get an HTTP 200 response.
Restricted roles in Drupal
Suppose we create a role ‘Contributor’ in a CMS like Drupal and disable the permission to view the toolbar search option. We can validate it by following the steps below.
- Open the site URL and Login with Contributor role credentials.
- Verify the contributor is not able to view the admin toolbar search icon.
Understanding how they work
Let us consider online shopping websites like Myntra.
Things the user is seeing on the screen and interacting with like product lists, Added items in the cart, checkout screen, etc are part of the frontend. But, these things are not present on the user's machine(mobile/ laptop /desktop).
However, they are stored and managed on Myntra’s server side so that all the users will be able to see the same data on the applications/websites. Also, this data can be managed from the server side by adding/ deleting/ updating the details.
Also, whatever happens on the screen is controlled by the front-end code. Whatever the user sees, the frontend is responsible for showing and updating it.
Advantages of front-end validation
- Front-end validation is responsible for improving the user experience of using the application/website.
- Front-end validation determines the user can view, access, and interact with each element of the product easily.
Disadvantages of front-end validation
- Client-side validation can be bypassed easily.
- This validation does not assure that the application is protected from malicious attacks on the server and database.
Advantages of back-end validation
- Back-end validation confirms no corrupt data/invalid data is present in the database by eliminating the data errors.
- The submitted data is cleaner and more sensible.
Disadvantages of back-end validation
- Implementing the back-end validation code increases the response time resulting in poor user experience.
Summary
Because of both validations, we can have a good performant application with fewer errors. The validation also reduces the complaints and rejections against the requirements of the product.
To improve the quality of a website or application we need to validate both front-end and back-end methods of validation. Both validations are critical in terms of security.
I hope this has been helpful!! Happy learning!