├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json └── src ├── App.js ├── App.test.js ├── components ├── FormPanel.js ├── RegisterForm.js ├── ValidationAlert.js └── inputs │ ├── CheckboxInput.js │ ├── RadioInput.js │ ├── SelectInput.js │ ├── TextInput.js │ └── TextareaInput.js ├── hooks └── useForm.js ├── index.js ├── logo.svg ├── models └── registrationModel.js ├── serviceWorker.js └── services ├── inputParser.js └── inputValidator.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 krzaku281 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-hooks-complex-form-validation 2 | Sample how managing inputs in form in react hooks 3 | 4 | Read more https://medium.com/@krzakmarek88/complex-form-validation-in-react-hooks-cb07367196b9 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hooks-complex-form-validation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.6", 7 | "react-dom": "^16.8.6", 8 | "react-scripts": "3.0.1", 9 | "uikit": "^3.1.6" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": { 21 | "production": [ 22 | ">0.2%", 23 | "not dead", 24 | "not op_mini all" 25 | ], 26 | "development": [ 27 | "last 1 chrome version", 28 | "last 1 firefox version", 29 | "last 1 safari version" 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krzaku281/react-hooks-complex-form-validation/45e0aaee19e5d4c68aa09b3b4a4ba621d733e414/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | Complex Form Validation 23 | 24 | 25 | 26 |
27 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import '../node_modules/uikit/dist/css/uikit.min.css' 4 | import RegisterForm from './components/RegisterForm'; 5 | 6 | function App() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/FormPanel.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import useForm from '../hooks/useForm'; 3 | import TextInput from './inputs/TextInput'; 4 | import RadioInput from './inputs/RadioInput'; 5 | import TextareaInput from './inputs/TextareaInput'; 6 | import CheckboxInput from './inputs/CheckboxInput'; 7 | import SelectInput from './inputs/SelectInput'; 8 | 9 | function FormPanel({ title, btnName, submitCallback, model }) { 10 | const [inputs, setInputs, setSubmit] = useForm(model, submitCallback); 11 | 12 | const Components = { TextInput, RadioInput, TextareaInput, CheckboxInput, SelectInput }; 13 | 14 | const capitalize = expression => expression.charAt(0).toUpperCase() + expression.slice(1); 15 | 16 | const renderInput = input => { 17 | const Component = Components[capitalize(input.type) + 'Input']; 18 | return ; 19 | } 20 | 21 | return ( 22 |
23 |

{title}

24 |
25 | {inputs.map(input => renderInput(input))} 26 |
27 | 28 |
29 |
30 |
31 | ) 32 | } 33 | 34 | export default FormPanel; -------------------------------------------------------------------------------- /src/components/RegisterForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FormPanel from './FormPanel'; 3 | import registerFormModel from '../models/registrationModel'; 4 | 5 | function RegisterForm() { 6 | const submitCallback = e => alert(registerFormModel.map(m => m.label + ': ' + m.value + ',\n').join('')); 7 | 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | 15 | export default RegisterForm; 16 | -------------------------------------------------------------------------------- /src/components/ValidationAlert.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ValidationAlert = ({ content }) => { 4 | return
{content}
5 | } 6 | 7 | export default ValidationAlert; -------------------------------------------------------------------------------- /src/components/inputs/CheckboxInput.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ValidationAlert from '../ValidationAlert'; 3 | 4 | const CheckboxInput = ({ name, label, type, value, alert, setInputs }) => { 5 | return ( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | } 13 | 14 | export default CheckboxInput; -------------------------------------------------------------------------------- /src/components/inputs/RadioInput.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ValidationAlert from '../ValidationAlert'; 3 | 4 | function RadioInput({ name, label, type, value, alert, options, setInputs }) { 5 | return ( 6 |
7 |
{label}
8 | {options && options.map(option => 9 |
10 | 11 | 12 |
)} 13 | 14 |
15 | ) 16 | } 17 | 18 | export default RadioInput; -------------------------------------------------------------------------------- /src/components/inputs/SelectInput.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ValidationAlert from '../ValidationAlert'; 3 | 4 | function SelectInput({ name, label, type, value, alert, options, setInputs }) { 5 | return ( 6 |
7 | 8 | 11 | 12 |
13 | ) 14 | } 15 | 16 | export default SelectInput; 17 | 18 | -------------------------------------------------------------------------------- /src/components/inputs/TextInput.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import ValidationAlert from '../ValidationAlert'; 3 | 4 | function TextInput({ name, label, type, value, alert, setInputs }) { 5 | return ( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | } 13 | 14 | export default TextInput; -------------------------------------------------------------------------------- /src/components/inputs/TextareaInput.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ValidationAlert from '../ValidationAlert'; 3 | 4 | function TextareaInput({ name, label, type, value, alert, setInputs }) { 5 | return ( 6 |
7 | 8 | 9 | 10 |
11 | ) 12 | } 13 | 14 | export default TextareaInput; -------------------------------------------------------------------------------- /src/hooks/useForm.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | const useForm = (initModel, submitCallback) => { 4 | const [inputs, setInputs] = useState(initModel); 5 | 6 | const handleChange = e => { 7 | e.persist(); 8 | inputs.forEach(i => { 9 | if (i.name === e.target.name) { 10 | i.value = i.type === 'checkbox' ? e.target.checked : e.target.value; 11 | parseInput(i); 12 | validateInput(i); 13 | } 14 | }); 15 | setInputs([...inputs]); 16 | }; 17 | 18 | const handleSubmit = e => { 19 | e && e.preventDefault(); 20 | inputs.forEach(i => validateInput(i)); 21 | inputs.some(i => i.alert) ? setInputs([...inputs]) : submitCallback(); 22 | }; 23 | 24 | const parseInput = input => input.value = input.parseFun ? input.parseFun(input.value) : input.value; 25 | 26 | const validateInput = input => { 27 | let alert = null; 28 | input.validators && input.validators.forEach(v => alert = v.isValidFun && !v.isValidFun(input.value) ? v.alert : alert); 29 | input.alert = alert; 30 | } 31 | 32 | return [inputs, handleChange, handleSubmit] 33 | }; 34 | 35 | export default useForm; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import * as serviceWorker from './serviceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | // If you want your app to work offline and load faster, you can change 9 | // unregister() to register() below. Note this comes with some pitfalls. 10 | // Learn more about service workers: https://bit.ly/CRA-PWA 11 | serviceWorker.unregister(); 12 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/models/registrationModel.js: -------------------------------------------------------------------------------- 1 | import { parseOnlyLetterAndSpace, parseLength } from '../services/inputParser'; 2 | import { checkAtLeastLength, checkEmailPattern, checkIsfilled, checkIsTrue } from '../services/inputValidator'; 3 | 4 | const registrationModel = [{ 5 | name: 'name', 6 | label: 'Name', 7 | type: 'text', 8 | parseFun: parseOnlyLetterAndSpace, 9 | validators: [{ 10 | id: 'name-length', 11 | isValidFun: expression => checkAtLeastLength(expression, 3), 12 | alert: 'Name is too short' 13 | }] 14 | }, { 15 | name: 'mail', 16 | label: 'Email', 17 | type: 'text', 18 | validators: [{ 19 | id: 'mail-pattern', 20 | isValidFun: checkEmailPattern, 21 | alert: 'Email is not valid' 22 | }, { 23 | id: 'email-required', 24 | isValidFun: checkIsfilled, 25 | alert: 'Email is empty' 26 | }] 27 | }, { 28 | name: 'education', 29 | label: 'Education', 30 | type: 'select', 31 | options: [ 32 | { value: '', name: 'None' }, 33 | { value: 'primary', name: 'Primary School' }, 34 | { value: 'secondary', name: 'Secondary School' }, 35 | { value: 'university', name: 'University' } 36 | ], 37 | validators: [{ 38 | id: 'education-required', 39 | isValidFun: checkIsfilled, 40 | alert: 'Education is not selected' 41 | }] 42 | }, { 43 | name: 'sex', 44 | label: 'Sex', 45 | type: 'radio', 46 | options: [ 47 | { value: 'male', name: 'Male' }, 48 | { value: 'female', name: 'Female' } 49 | ], 50 | validators: [{ 51 | id: 'sex-required', 52 | isValidFun: checkIsfilled, 53 | alert: 'Sex is not selected' 54 | }] 55 | }, { 56 | name: 'description', 57 | label: 'Description', 58 | type: 'textarea', 59 | parseFun: expression => parseLength(expression, 2000), 60 | validators: [{ 61 | id: 'description-required', 62 | isValidFun: checkIsfilled, 63 | alert: 'Description is empty' 64 | }] 65 | }, { 66 | name: 'terms', 67 | label: 'Agree to terms and conditions', 68 | type: 'checkbox', 69 | validators: [{ 70 | id: 'terms-required', 71 | isValidFun: checkIsTrue, 72 | alert: 'You must agree before submitting' 73 | }] 74 | }]; 75 | 76 | export default registrationModel; -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/services/inputParser.js: -------------------------------------------------------------------------------- 1 | export const parseOnlyLetterAndSpace = expression => expression.replace(/[^A-Za-z ]/g, ''); 2 | 3 | export const parseLength = (expression, length) => expression.substring(0, length); 4 | -------------------------------------------------------------------------------- /src/services/inputValidator.js: -------------------------------------------------------------------------------- 1 | export const checkAtLeastLength = (expression, length) => expression && expression.trim().length >= length; 2 | 3 | export const checkIsfilled = expression => expression && expression.length > 0; 4 | 5 | export const checkIsTrue = expression => expression; 6 | 7 | export const checkEmailPattern = mail => { 8 | const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 9 | return regex.test(mail); 10 | } --------------------------------------------------------------------------------