DEV Community

Harish Karthik
Harish Karthik

Posted on

Form validation for react using browser form validation

First of all, i would like to say that this is by no means the best way for form validation or anything like that. This is just a post to show how using client side form validation will significantly reduce the lines of code in a project also makes it accessibility friendly. You can know more about it from the following links - Mozilla docs and w3.org docs

So first of all what is client side form validation and what can it do?

Client side form validation is a validation process carried out by a browser before a form is submitted. For example : if we declare an input as type email and enter a text that does not have '@' symbol in it, when we submit the form, the browser will inform us saying that the entered value is not a valid email and stops the submit event in the form.

How can we benefit from this?

There are multiple parameters that can be used in form validation, including regular expression. This can help us to do some basic form validation like minimum characters, maximum characters, minimum value, maximum value and regular expression pattern. The browser validation happens after every single change in the input, add a pseudo class :invalid or :valid to the input field based on the validation and the validation results are stored in inputEvent.target.validity. we can access this object to see what validations are passed and failed.

This is a basic HTML,CSS and Javascript stuff. How can react benefit from this?

  • Usually in most form validation, we include a state "isFormValid" or something similar to monitor the validity of the form based on each input and prevent form submit the form submit if it is false. We don't have to do that because when we provide a validation parameter, browser prevents form submission if the input entered in the field is invalid.
  • We don't have to write individual pieces of code to check if the length of the input is of certain length or if the input is under certain limit or not or even the regular expression evaluation. The most impressive part is browser error can actually say what part of the validation went wrong.
  • Since it is client side validation, the accessibility support is built in and the browser tells what went wrong and how to fix it.

But there is a catch

  • We hit the limitations of the client side form validation when we have to use complicated input types. For example, when we need to enter a segmented input fields like XXX-XXX-XXXX.
  • When we need to use more than one regular expression to validate the inputs. For example : When validating a password, we need to show the error your password is missing a uppercase letter or missing a lowercase letter. Instead of showing the entire your password must have one lowercase letter and one uppercase letter.

In such cases we are on our own to write the form validation.

I have added the codesandbox and github. Please go through the readme and the files to know more. Here is the demo.

Top comments (2)

Collapse
 
cuginoale profile image
Alessio Carnevale

Interesting article,
I wrote one my self where I demonstrate how to implement the Password validation
using native validation function.
Please let me know what you think:
dev.to/cuginoale/form-validationsu...

Collapse
 
roblevintennis profile image
Rob Levin

I've enjoyed using Vest lately. I used to use Formik and react final form for React projects. But those are pretty heavy-wieght imo. Vest is nice because it's framework agnostic so I can also use it in Svelte and Vue.