Working with react we all have learnt one thing that you need to write everything you require, well its always ain’t true we find lots of libraries readily available which we can download & speed up our development process right. But why you should be not be upto download libraries always is it makes us dependent on the creator of the library rather if we construct our own there’s no dependency plus scalability to customize it as well which primarily lack when using an npm library.
One common areas of concern seems to be around working with forms in react, we need to create a component construct the html, the form behaviour & everything else.
What about validations ???
yes, you got it we need to validate our form as well & there’s a possibility that your form does contain multiple validations which we need to validate & maybe we have a huge form or multiple forms as well.
what do we do !!
👈Yes that’s what we exactly do
It’s a one heck of a job to validate the form, what do we do about it.
Simple, automate it with your own logic which makes it reusable across application or projects & how do we go about it.
This is how i saved lots of hair
We have a service that talks about every possible validation our system can have & returns a boolean value to state if its valid or invalid. The current logic i have implemented states as follows
valid : returns true; invalid: returns false
We have 2 core functions here rest are validator functions
- checkErrors : this function first identifies all the errors we are supposed to evaluate, this errors are passed as an argument to the function & yes the value on which we need to run these validators on
- checkValidators : this functions is used to evaluate the type of error that needs to be checked & return the status of its validations
the checkErrors function runs thru all the errors & at the end of process holds only info on errors that have failed, in fact it consists of error messages that are supposed to be displayed with the help of the getErrorMsg function, obviously our system does not what message to display so we need to frame it up as below
we have errorMessages which knows which msg needs to be displayed for which error & a helper function to fetch the message getErrorMsg which was used previously.
But why are we opting for an object properties as functions, its because we aren’t aware of some dynamic inputs in validators like for max length or min length how can we know exactly how many characters were required, so that information comes as an errObj information.
All we need now is a component which can use the service & populate the messages for us
The ShowErrors component, takes couple of props like the value we need to evaluate, validations applied on a field & display to decide when the message needs to be populated.
You can see this in action on stackblitz demo.
P.S my idea of working with things is not to compose it as a library but as a reusable & a code that can be tweaked as per our own requirements.
Happy coding, Cheers 😁😁😁😁 🍺 🍻 🍷 🍸 🍹 🍾