├── .gitignore ├── .idea ├── inspectionProfiles │ └── Project_Default.xml ├── misc.xml ├── modules.xml ├── react-validation.iml ├── vcs.xml └── workspace.xml ├── README.md ├── config └── webpack.config.prod.js ├── package.json ├── public └── index.html ├── src ├── App.js ├── components │ ├── base │ │ └── index.js │ ├── button │ │ └── index.js │ ├── form │ │ └── index.js │ ├── input │ │ └── index.js │ ├── select │ │ └── index.js │ └── textarea │ │ └── index.js ├── hocs │ ├── button │ │ └── index.js │ ├── control │ │ └── index.js │ └── form │ │ └── index.js ├── index.js └── main.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | .idea/ -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/react-validation.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <<<<<<< HEAD 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ======= 21 | 22 | >>>>>>> Updated link. 23 | 24 | 25 | 26 | 27 | 34 | 35 | 36 | <<<<<<< HEAD 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 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | >>>>>>> Updated link. 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 181 | 182 | 183 | 184 | _byComponent 185 | _refs 186 | _byRef 187 | component 188 | props 189 | _isCheckable 190 | _errors 191 | _error 192 | 123 193 | _isChanged 194 | MyInput 195 | MySelect 196 | MyTextarea 197 | _getError 198 | console 199 | isChanged 200 | _updateValue 201 | byId 202 | console.log 203 | _setValue 204 | state.byIdWithProps[id] 205 | byIdWithProps 206 | nextID 207 | without 208 | omit 209 | componentDidMount 210 | Validation.components. 211 | alpha 212 | validations 213 | _setErrors 214 | 215 | 216 | _byComponent 217 | _byRef 218 | _components 219 | error 220 | Input 221 | Select 222 | Textarea 223 | _setProps 224 | byId 225 | 226 | 227 | 228 | 230 | 231 | 274 | 275 | 276 | 277 | 278 | false 279 | 280 | false 281 | false 282 | true 283 | 284 | 285 | true 286 | DEFINITION_ORDER 287 | 288 | 289 | 290 | 291 | 292 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | <<<<<<< HEAD 323 | 324 | 325 | 326 | 327 | 328 | ======= 329 | >>>>>>> Updated link. 330 | 331 | 332 | 333 | 88 | 89 | 90 |
91 | 95 |
96 |
97 | 98 |
99 | ; 100 | } 101 | } 102 | ``` 103 | 104 | Note the ```validations``` prop. It's an array of functions which was defined earlier. 105 | 106 | ## Components and props 107 | 108 | ```react-validation``` provides a ```components``` with pre-defined structure and ```hoc```s to define it self. The components are: ```Form```, ```Input```, ```Select```, ```Textarea``` and ```Button```. 109 | All of them are just custom wrappers around the native components. They can accept any valid attributes and a few extra: 110 | 111 | 1. ```isUsed``` - ```Input```, ```Select``` and ```Textarea```: says to react-validation to mark component as it was blured. 112 | 2. ```isChanged``` - ```Input```, ```Select``` and ```Textarea```: says to react-validation to mark component as it was changed. 113 | 3. ```validations``` - ```Input```, ```Select``` and ```Textarea```: accepts an array of validations functions. 114 | 115 | ##### NOTE: Always provide a ```name``` prop to ```Input```, ```Select``` and ```Textarea```. 116 | 117 | ### Form component 118 | 119 | ``` 120 | Form 121 | ``` 122 | 123 | The most important component, which provides the heart of react-validation. It basically mixes the binding between the form itself and child react-validation components via ```context```. 124 | Any valid props can easily be passed to ```Form```, such ```onSubmit``` and ```method```. 125 | 126 | ```Form``` provides four public methods: 127 | 128 | 1. ```validate(name)``` - validates control(s) with the passed name. The difference between this method and default validation is that ```validate``` marks the input as ```isUsed``` and ```isChanged```. ```name``` - name of the corresponding component(s). 129 | 130 | 2. ```showError(component [,error])``` - helps to handle async API errors. ```component``` - ref to the React Component to validate. ```error``` - error to show. Can be string or jsx. 131 | 132 | 3. ```hideError(component)``` - hides a corresponding component's error. ```component``` - ref to the React Component. 133 | 134 | 135 | ```javascript 136 | export default class Comment extends Component { 137 | handleSubmit = (event) => { 138 | event.preventDefault(); 139 | 140 | // Emulate async API call 141 | setTimeout(() => { 142 | this.form.showError(this.userInput, API error); 143 | }, 1000); 144 | }; 145 | 146 | removeApiError = () => { 147 | this.form.hideError(this.userInput); 148 | }; 149 | 150 | render() { 151 | return
{ this.form = c }} onSubmit={this.handleSubmit.bind(this)}> 152 |
153 |
154 |

Leave a comment

155 |
156 |
157 |
158 |
159 | 170 |
171 |
172 |