Password and Confirm Password validation in React
Today we will show you an example of the password and confirm password validation in React. Sometimes we need to add the password and confirm password field in react form so I will show you the step-by-step how to validate password and confirm password using React Hooks.
Checkout more articles on ReactJS
Demo Application
Steps to add a password and confirm password validation in React
1. Create a react application
We need to create a simple react application using create-react-app. We don’t need to install any NPM package to handle the validation. Run the following command to create a react app.
1 | npx create-react-app pwd-validation-react |
2. Design a form
Let’s create a form that contains Username, Password, and Confirm Password.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | import React, { useState } from 'react'; function App() { const [input, setInput] = useState({ username: '', password: '', confirmPassword: '' }); const [error, setError] = useState({ username: '', password: '', confirmPassword: '' }) const onInputChange = e => { } const validateInput = e => { } return ( <div className="app"> <h4>Password and Confirm Password validation in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h4> <form> <input type="text" name="username" placeholder='Enter Username' value={input.username} onChange={onInputChange} onBlur={validateInput}></input> {error.username && <span className='err'>{error.username}</span>} <input type="password" name="password" placeholder='Enter Password' value={input.password} onChange={onInputChange} onBlur={validateInput}></input> {error.password && <span className='err'>{error.password}</span>} <input type="password" name="confirmPassword" placeholder='Enter Confirm Password' value={input.confirmPassword} onChange={onInputChange} onBlur={validateInput}></input> {error.confirmPassword && <span className='err'>{error.confirmPassword}</span>} <button>Submit</button> </form> </div> ); } export default App; |
3. Add validation
Now let’s add the validation onBlur
and onChange
events where we will check the required validation and password match validation.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | const onInputChange = e => { const { name, value } = e.target; setInput(prev => ({ ...prev, [name]: value })); validateInput(e); } const validateInput = e => { let { name, value } = e.target; setError(prev => { const stateObj = { ...prev, [name]: "" }; switch (name) { case "username": if (!value) { stateObj[name] = "Please enter Username."; } break; case "password": if (!value) { stateObj[name] = "Please enter Password."; } else if (input.confirmPassword && value !== input.confirmPassword) { stateObj["confirmPassword"] = "Password and Confirm Password does not match."; } else { stateObj["confirmPassword"] = input.confirmPassword ? "" : error.confirmPassword; } break; case "confirmPassword": if (!value) { stateObj[name] = "Please enter Confirm Password."; } else if (input.password && value !== input.password) { stateObj[name] = "Password and Confirm Password does not match."; } break; default: break; } return stateObj; }); } |
4. Output
Let’s combine all code together and see how it looks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import React, { useState } from 'react'; function App() { const [input, setInput] = useState({ username: '', password: '', confirmPassword: '' }); const [error, setError] = useState({ username: '', password: '', confirmPassword: '' }) const onInputChange = e => { const { name, value } = e.target; setInput(prev => ({ ...prev, [name]: value })); validateInput(e); } const validateInput = e => { let { name, value } = e.target; setError(prev => { const stateObj = { ...prev, [name]: "" }; switch (name) { case "username": if (!value) { stateObj[name] = "Please enter Username."; } break; case "password": if (!value) { stateObj[name] = "Please enter Password."; } else if (input.confirmPassword && value !== input.confirmPassword) { stateObj["confirmPassword"] = "Password and Confirm Password does not match."; } else { stateObj["confirmPassword"] = input.confirmPassword ? "" : error.confirmPassword; } break; case "confirmPassword": if (!value) { stateObj[name] = "Please enter Confirm Password."; } else if (input.password && value !== input.password) { stateObj[name] = "Password and Confirm Password does not match."; } break; default: break; } return stateObj; }); } return ( <div className="app"> <h4>Password and Confirm Password validation in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h4> <form> <input type="text" name="username" placeholder='Enter Username' value={input.username} onChange={onInputChange} onBlur={validateInput}></input> {error.username && <span className='err'>{error.username}</span>} <input type="password" name="password" placeholder='Enter Password' value={input.password} onChange={onInputChange} onBlur={validateInput}></input> {error.password && <span className='err'>{error.password}</span>} <input type="password" name="confirmPassword" placeholder='Enter Confirm Password' value={input.confirmPassword} onChange={onInputChange} onBlur={validateInput}></input> {error.confirmPassword && <span className='err'>{error.confirmPassword}</span>} <button>Submit</button> </form> </div> ); } export default App; |
Run the application and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
It worked for me . Thank you <3
Glad it helped!