Create a Form Component in React that renders out a list of input fields and validates them before finally submitting the form to the server. Create the form from scratch WITHOUT using any third-party libraries like Formik or react-hook-forms.
<Form />
component that renders out a form.1. First Name
2. Last Name
3. Email Address
4. Password
5. Confirm Password
Register
button, the form should be submitted using the onSubmit
attribute on the HTML
form.On Blur
functionality.placeholder
associated with it.First Name
should be atleast 3 characters long.Last Name
should be atleast 3 characters long.Email
should follow a regex
text to be verified. Refer this link to get the regexPassword
and Confirm Password
should match exactly.Click to reveal
Can you try creating a formState
object that keeps track of all the form elements inside your form tag?
Click to reveal
Create a simple handleValidations()
function that gets triggered on onSubmit()
of the form. handleValidations()
will contain a bunch of if
statements and will finally return a boolean.
Click to reveal
Can you try creating a configuration object
that is an array of objects containing all the necessary information about the form fields you're trying to render? Can you loop through the object and render out the entire form?