- \n
- create-react-app package<\/a><\/li>\n
- ReactJS<\/a><\/li>\n
- Visual Studio Code IDE<\/a><\/li>\n<\/ul>\n
create-react-app is a useful package from the folks who created React to generate the skeletal of a full blown React Application. We use it here to create our starting point for this exercise. It pull down the latest version of ReactJS for us. Visual Studio Code is my favorite IDE for JavaScript development. Although you are free to follow along in an editor of your choice. <\/p>\n
2. Application Structure<\/h2>\n
We run the below command to generate our initial application structure:<\/p>\n
>npx create-react-app my-app\n<\/pre>\n
Once the above command finishes we should have our project generated and its structure should look like below:<\/p>\n
\n![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/Project-Structure-Form-Validation-ReactJS.jpg\")
Project Structure<\/figcaption><\/figure>\n<\/div>\n So let us now move ahead and create a component that renders a form. Following which we will write validation logic for the same.<\/p>\n
3. Form Component<\/h2>\n
Let us create a component that renders a simple form prompting the user to provide First, Last names, Age and Gender. The code for this component so far should look like below:<\/p>\n
Form.js<\/em><\/span><\/p>\n
import React, { useState } from 'react';\n\nfunction Form(props) {\n \n const [formData, setFormData] = useState({});\n const handleChange = ({ target }) => {\n setFormData({ ...formData, [target.name]: target.value });\n }\n \n return (\n <div style={{ \n display: 'flex', \n flexDirection: 'row' \n}} >\n <form style={{ \n display: 'flex', \n flexDirection: 'column' }}>\n <label>First Name<\/label>\n <input value={formData.firstName || ''}\nonChange={handleChange} type=\"text\" name=\"firstName\" \/>\n <label>Last Name<\/label>\n <input value={formData.lastName || ''} \nonChange={handleChange} type=\"text\" name=\"lastName\" \/>\n <label>Date of Birth<\/label>\n <input value={formData.DOB || ''} \nonChange={handleChange} type=\"datetime-local\" name=\"DOB\" \/>\n <label>Gender<\/label>\n <div>\n <input value=\"Male\" \nchecked={formData.gender === \"Male\"} \nonChange={handleChange} type=\"radio\" name=\"gender\" \/>Male\n <\/div>\n <div>\n <input value=\"Female\" \nchecked={formData.gender === \"Female\"} \nonChange={handleChange} type=\"radio\" name=\"gender\" \/>Female\n <\/div>\n <div>\n <input value=\"None\" \nchecked={formData.gender === \"None\"}\nonChange={handleChange} type=\"radio\" name=\"gender\" \/>Prefer not to say\n <\/div>\n <button type=\"button\">Save<\/button>\n <\/form>\n \n <\/div>);\n}\n\nexport default Form;<\/pre>\nNow our form is ready. Continuing on from this and building further we add a method called validateForm. To keep things simple we just check whether each field has a value and is not empty. If the validation fails we add a message to a state variable array called validationMessages. We display the contents of this state variable next to our form.
<\/div> <\/div><\/p>\nThe updated code with the above implemented looks like below:<\/p>\n
Form.js<\/em><\/span><\/p>\n
import React, { useState } from 'react';\n\nfunction Form(props) {\n const [validationMessages, setValidationMessages] = useState([]);\n const [formData, setFormData] = useState({});\n const handleChange = ({ target }) => {\n setFormData({ ...formData, [target.name]: target.value });\n }\n const handleClick = (evt) => {\n validateForm();\n if (validationMessages.length > 0) {\n evt.preventDefault();\n }\n }\n const validateForm = () => {\n const { firstName, lastName, DOB, gender } = formData;\n setValidationMessages([]);\n let messages = [];\n if (!firstName) {\n messages.push(\"First Name is required\");\n }\n if (!lastName) {\n messages.push(\"Last Name is required\");\n }\n if (!gender) {\n messages.push(\"Please select a Gender\");\n }\n if (!DOB) {\n messages.push(\"Date of Birth is required\");\n }\n setValidationMessages(messages);\n }\n return (\n <div style={{ display: 'flex', flexDirection: 'row' }} >\n <form style={{ display: 'flex', flexDirection: 'column' }}>\n <label>First Name<\/label>\n <input value={formData.firstName || ''} onChange={handleChange} type=\"text\" name=\"firstName\" \/>\n <label>Last Name<\/label>\n <input value={formData.lastName || ''} onChange={handleChange} type=\"text\" name=\"lastName\" \/>\n <label>Date of Birth<\/label>\n <input value={formData.DOB || ''} onChange={handleChange} type=\"datetime-local\" name=\"DOB\" \/>\n <label>Gender<\/label>\n <div>\n <input value=\"Male\" checked={formData.gender === \"Male\"}\n onChange={handleChange} type=\"radio\" name=\"gender\" \/>Male\n <\/div>\n <div>\n <input value=\"Female\" checked={formData.gender === \"Female\"}\n onChange={handleChange} type=\"radio\" name=\"gender\" \/>Female\n <\/div>\n <div>\n <input value=\"None\" checked={formData.gender === \"None\"}\n onChange={handleChange} type=\"radio\" name=\"gender\" \/>Prefer not to say\n <\/div>\n <button type=\"button\" onClick={handleClick}>Save<\/button>\n <\/form>\n <div>{validationMessages.length > 0 && <span>Validation Summary<\/span>}\n <ul>\n {validationMessages.map(vm => <li key={vm}>{vm}<\/li>)}\n <\/ul>\n <\/div>\n <\/div>);\n}\n\nexport default Form;<\/pre>\nIn the next section we will run this code and see it in action.<\/p>\n
4. Validation in Action<\/h2>\n
We run the code using the below command:<\/p>\n
\/my-app>npm start\n<\/pre>\n
This will launch our application in the default browser. And the results should look like below:<\/p>\n
- ReactJS<\/a><\/li>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/ProjectOutputFormValidationReactJS1.jpg\")
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/ProjectOutputFormValidationReactJS2.jpg\")