A not-so-trivial example In the , I proposed implementing form validation/submission in vanilla React (no 3rd party libraries) using HTML5 and Constraint API. first part of this article 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 field. password The end product will look like this: and the interactive is available here: demo https://codesandbox.io/s/not-so-simple-form-validation-dj6296?file=/src/App.tsx:944-965?embedable=true 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 is built on top of the component we already implemented in part one. TextInput The only thing I added was the prop to inject the show/hide button: RhsComponent The is just a button that toggles state var between true and false. This in turn switches the input type between “ “ and “ ”. PlainTextToggle isPlainText text password I am not going to discuss this implementation further as it’s not in the scope of this article. All the validation magic comes courtesy of the prop! pattern Validating the password As we know HTML5 allows for custom validation through the use of the property. pattern The needs to be a valid or a combination of multiple RegExes. pattern RegEx I am no expert when it comes to writing regular expressions so I googled around and found the following four (utils/validationRules.ts): The first four lines in the above screenshot implement 4 of our requirements. The further down is the combination (in logical AND) of those four RegExes and that is what we are going to set in the password pattern property. PASSWORD_VALID_REGEX Please note that the component is just this: password and, as we said, its attribute is i.e. the string that combines the 4 RegExes. pattern PASSWORD_VALID_REGEX The fifth validation rule, , is enforced by the “required” HTML attribute as we already saw when we implemented the and fields. required name email 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 field does in our form. Tel If it wasn’t for the show/hide toggle component then the component code would have looked like this: password Checklist To improve the UX and provide visual feedback on the validation process we are now going to add the component: CheckList 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 that gets mapped to an array of tags. If the pattern is matched then we add the className to tweak the style. (rules) <p> “passed” Composing them The next step is to compose the and the components. We do this in the PasswordInput CheckList PasswordWithChecklist: It simply funnels the password value it gets from into PasswordInput CheckList. In the end Our now looks like: App.tsx Happy coding 🙃! Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Implementing Password Validation in React With HTML5

Too Long; Didn't Read

Company Mentioned

@cuginoale

Credibility

RELATED STORIES