Complex Form Validation in React Hooks
Did you dream about simple and easy way to create any form on website and validation to it? With React Hooks and below solution now it is possible. And I really like this matter. So let’s get started.
Fundamental element of that solution is good described form model. In below sample we will take registration form and we will use some inputs in different cases to validate and parse them.
Preparation complex form validation model
What fields we need? Name, email, education, sex, description, terms. Each field has different combination of data type, validation rules and input parsing. It seems that will be good stuff for presentation of complex validation.
What properties can describe all different input types in any complex validation form?
— name, it is required for React array key, input label pair identifier and debugging,
— label, description for input,
— value, that what contains input,
— type, input type like in html
— parseFun, parsing function for new value of input, prohibited elements will be erase,
— validators, list of validators, if something will be wrong with input it will alert about that,
— options, required for radio and select inputs to give availables answers to choose. Answer has value and name properties.
And each validator contains:
— id, identifier,
— isValidFun, function validating input and gives info about problems,
— alert, statement for user when input is invalid.
Complex Form Validation in sample
Take a look on registrationForm.js because that’s the biggest and the most important file in whole solution of complex validation.
Next you can see validating and parsing functions required in registrationForm.js
Then we have collection of input components. These components will use for render various types of inputs. Each input component contains ValidationAlert for hint what is wrong with value of input.
For rendering input views in form came occasion to create custom hook. Name of hook will be useForm and it has two parameters to pass during initialization. First parameter is form model and second callback for submit button. Similar like React hooks it returns array. But here we have three elements, first is inputs array, second function to update them and third enhanced submit function.
Next let’s create generic complex form validation panel. That component will be base for all specific form in application. But now we are creating it for first usage in registration form. Next time we can reuse it.
That component generate all input views. It depends on types put in form validation model and at the bottom is submit button. That button validate form again and invoke callback after proper filled form and clicked.
Now we have generic base for creating registration form or other form. Mainly preparing only model for any type of complex form validation.
Ending registration page implementation, let’s create RegistrationForm and put within FormPanel with proper props. Also in RegistrationForm, create submit callback function what should be invoke after proper filled form.
Try to use Complex Form Validation in real React Hooks application
That’s all. Now you can run complex form validation. And you can look at this code on gitHub, if you prefer.
Project based on start pack create-react-app and a little bit UI Kit for better looks.
If you like this solution, like it here or on gitHub, please. Thanks :)
I wish pleasant coding with complex form validation!
Mir i sława!
