Learn more about input validation
What is input validation?
Input validation - sometimes also called form validation - refers to any type of verification that data has been correctly entered into an input field or that it meets certain specifications. The most common data types affected by form validation are passwords and text.
Feedback provided by input validation can vary. For example, if the user has typed letters into a field reserved for numbers only, input validation would inform them that they have not met the specific requirements for that box, and why. Alternatively, if a field requires that the user enters a valid phone number or email address, input validation will let them know whether they have followed the accepted format for entering this data or not.
In a case where input into a specific field is required in order to proceed further, yet the user has left this area blank, input validation would notify them that they have overlooked this section of the form, urging them to fix the error in order to continue.
The most common type of input validation, however, is simply that which lets users know if they have reached (or exceeded) a required minimum (or maximum) character count for a particular field. Such as when choosing a password for login or when typing a message.
Types of input validation
There are two principle types of input validation:
● Client-Side Validation
This is performed by the web browser, before input is sent to the web server. Catching incorrect data at this stage saves time by allowing the user to fix any errors immediately, before it is sent to the server.
● Server Side Validation
This type of validation is performed by a web server, after input has been sent to the server. Due to the high risk of malicious users managing to bypass client-side validation, server-side validation remains a necessary second step in any security process.
Note that these are not alternative solutions, but rather complementary measures. Indeed, any list of form validation best practices will recommend implementing both kinds of validation.
Why is form validation necessary?
There are two main reasons why input validation is necessary when you design a form. Firstly, by adding an input validation pattern you guarantee that users will provide you with all the information you require, and in precisely the format that you need it. Secondly, form validation significantly improves security; both yours and that of the user (e.g. through encouraging stronger passwords).
For example, let’s say that you’ve determined that the required format for a password is that it must be between 8 and 15 characters long, and that it must contain at least one uppercase letter, one special character, and one number. Allowing users to submit data that does not meet this criteria would - at minimum - cause delays, and potentially also constitute a security risk.
Setting up input validation in Framer
In Framer you can use Code Overrides to validate the length or value of input data. In the example above, the data type will be validated by the amount of characters entered into the input.