Custom hook for input in form validation
we create a seperate custom hook to validate the input from the form
use-input.js
It is mandatory to start the name of custom hook starting from use an so we are taking name as ‘ useInput’
Important
Now we are passing a custom validator which is diffrent for every input like for name it is different and for email it is diffrent
so we have to provide the validation condition in this and this will return a object having some values like the input itself , inputvalidity status , if it is invalid , the changeHandelere→ suppose you want to check when the user is giving the input , blurHandeler → suppose if user focus on the inut tag and then click out of that input then it is called ,reset→ for reseting the value ( this we will call afrer submittion of the form )
Problem
Now yaha par problem ye hai ki hum ek function expect kar rhe hai jo ki validator function hoga or diffrent type k input k liye diffrent hoga
now the challenging part is that is useInput k input ko as a parameter lekar wo function execute karan so we will look how to provide the validator function
parent Form
so yaha par kuch is tarah se hum function pass karege as parameter jo ki input ki value useInput hook se lekar or use is function k according validate karke saare fields of object return karega
Use the hook in jsx
Now we have successfully assign the object in my parent form component and give the condition to validate the input tag
but to use that functionalities in the form we have to use the functions which are returning from the hook and use them in our jsx code withing the input tag which we want to validate
