Form validation/submission in vanilla React (part 2)
Tags: react, html, form, validation
Published: 2022-08-28 16:27:00

## A not so trivial example

In the [first part of this article](https://dev.to/cuginoale/form-validationsubmission-in-vanilla-react-no-libraries-51jm) I proposed implementing form validation/submission in vanilla React (no 3rd party libraries) using HTML5 and Constraint API.

The code example provided was intentionally simple to make the point that, if you build the feature on top of the native implementation, then you:

-   only need to write a fraction of code to handle forms
-   don’t need to learn how to use a new library
-   get a lighter JS bundle
-   reduce the number of dependencies
- you don’t need to write tests for the validation fn, it’s already been tested!

----------

This time I would like to add a less trivial component to our form: the **password** field.

The end product will look like this:

![A less trivial example](https://cdn-images-1.medium.com/max/800/1*0Fk14U9-DaD36gqtLH6Iyw.png)


and the interactive **demo** is [available here](https://codesandbox.io/s/not-so-simple-form-validation-dj6296?file=/src/App.tsx:944-965).

The password field in our form is responsible for validating the user input, testing it against the following 5 validation rules:

-   mandatory
-   at least one Uppercase
-   at least one digit
-   at least 8 characters
-   at least one special character

It also comes with the show/hide password button to toggle the password visibility.

The [password component](https://codesandbox.io/s/not-so-simple-form-validation-dj6296?file=/src/components/passwordInput.tsx) is built on top of the **TextInput** component we already implemented in part one. The only thing I added was the **RhsComponent** prop to inject the show/hide button:

![Password component](https://cdn-images-1.medium.com/max/800/1*WHjCL5kV_2DZjHNmwI4AMA.png)


The **PlainTextToggle** is just a button that toggles **isPlainText** state var between true and false. This in turn switches the input type between “**text**“ and “**password**”.  I am not going to discuss this implementation further has it’s not in the scope of this article.

All the validation magic comes courtesy of the **pattern** prop!

### Validating the password

As we know HTML5 allows for custom validation through the use of the **pattern** property. **Pattern** needs to be a valid [RegEx](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)… or the combination of multiple RegExes.

I am no expert when it comes to writing regular expressions so I googled around and found the following four ([utils/validationRules.ts](https://codesandbox.io/s/not-so-simple-form-validation-dj6296?file=/src/utils/validationRules.ts)):

![Regular expressions magic](https://cdn-images-1.medium.com/max/800/1*Qpiohl5RLtLr-V29cyAJdQ.png)


The first four lines in the above screenshot implement 4 of our requirements. The **PASSWORD_VALID_REGEX** further down is the combination (in logical AND) of the those four RegExes and that is what we are going to set in the password pattern property.

Please note that the **password** component is just this:

![The password component](https://cdn-images-1.medium.com/max/800/1*FbClc8Rn2alqo66Lf5nsfg.png)


and, as we said, it’s **pattern** attribute is **PASSWORD_VALID_REGEX** i.e. the string that combines the 4 RegExes.

The fifth validation rule, **required**, is enforced by the “required” HTML attribute as we already saw when we implemented the **name** and **email** fields.

This code alone already implements all of our requirements!

**Let me repeat this again: to implement all of the 5 validation rules we just need to provide one string and one attribute!**

This is all this component needs to do: to get the user input and validate it against the pattern that comes out of the composition of 4 simple regular expressions. No more, no less than what the **Tel** field does in our form.

If it wasn’t for the show/hide toggle component then the **password** component code would have looked like this:

![shorter code](https://cdn-images-1.medium.com/max/800/1*FABmvKviccp30uMc1Bwe7w.png)

----------

### Check list

To improve the UX and provide visual feedback of the validation process we are now going to add the [**CheckList** component](https://codesandbox.io/s/not-so-simple-form-validation-dj6296?file=/src/components/checklist.tsx):

![](https://cdn-images-1.medium.com/max/800/1*jiBaiS_oT7hJeb_dGJtyFw.png)

It gets the password the user types in and runs it through the four RegExes to check which one is satisfied.

We start defining an array _(rules)_ that gets mapped to an array of **_<p>_** tags. If the pattern is matched then we add the **“passed”** className to tweak the style.

![](https://cdn-images-1.medium.com/max/800/1*0y823sdRYvREFS44AR8FCA.png)

----------

### Composing them

Next step is to compose the **PasswordInput** and the **CheckList** components. We do this in the **PasswordWithChecklist:**

![](https://cdn-images-1.medium.com/max/800/1*C8SBT5bJ1JPLifQcwfOdcg.png)

It simply funnels the password value it gets from **PasswordInput** into **CheckList.**

### In the end

Our **App.tsx** now looks like:

![](https://cdn-images-1.medium.com/max/800/1*urjX2DZ48Bh53ZnioSyRaw.png)

Just one line taller than the one we have in [part-one](https://dev.to/cuginoale/form-validationsubmission-in-vanilla-react-no-libraries-51jm) :)

Happy coding!