Form validation #28
Form validation #28
Conversation
…ActionButtons, HomePage and Header components.
… configuration. Added rule class-name-format rule.
| if (!this.canSubmitForm()) { | ||
| return; | ||
| } | ||
| let validation = this.validator.validate(this.state.user); |
There was a problem hiding this comment.
I dont see validation being reassingned, use const instead
| const invalidPhone = validation.phone && | ||
| !get(validation, 'phone.isValid'); | ||
| const invalidSkypeId = validation.skypeId && | ||
| !get(validation, 'skypeId.isValid'); |
There was a problem hiding this comment.
Isn't a default return value for get needed? just in case
| invalid={isNameInvalid} | ||
| feedback={errors.name} | ||
| invalid={invalidName} | ||
| feedback={get(validation, 'name.message')} |
There was a problem hiding this comment.
same here get(validation, 'name.message, '')
| invalid={isEmailInvalid} | ||
| feedback={emailFeedback} | ||
| invalid={invalidEmail} | ||
| feedback={get(validation, 'email.message')} |
| placeholder="skype Id" | ||
| required={true} | ||
| invalid={invalidSkypeId} | ||
| feedback={get(validation, 'skypeId.message')} |
| placeholder="Phone Number" | ||
| required={true} | ||
| invalid={invalidPhone} | ||
| feedback={get(validation, 'phone.message')} |
| ...validationSettings.email, | ||
| ...validationSettings.skypeId, | ||
| ...validationSettings.phone | ||
| ] |
There was a problem hiding this comment.
I think we will need lodash cloneDeep here (unless you spread each nested object), spread will clone first level attributes. Nested Objects will be passed by reference and unexpectedly mutated.
yarn add lodash.cloneDeep
and here
import cloneDeep from 'lodash.cloneDeep'
webapp/package.json
Outdated
| "sass-loader": "^7.0.3", | ||
| "style-loader": "^0.21.0", | ||
| "uglifyjs-webpack-plugin": "1.2.5", | ||
| "validator": "^10.4.0", |
There was a problem hiding this comment.
Move this to dependencies, it's part of the code bundle.
| import FormInput from '../../common/form/FormInput'; | ||
|
|
||
| import { Row } from 'reactstrap'; | ||
| import { get } from 'lodash'; |
There was a problem hiding this comment.
Replace this with
import get from 'lodash.get';
There was a problem hiding this comment.
I try to do the same with lodash.cloneDeep but I am having some issues: warning webpack-bundle-analyzer > bfj-node4@5.3.1: Switch to the bfj package for fixes and new
features!
| }); | ||
|
|
||
| return { isValid: true, ...validation }; | ||
| } |
| this.toggle(); | ||
| }); | ||
| } | ||
| } |
There was a problem hiding this comment.
Move this callback to a method to simplfy this handler, and prefer use arrow callback.
2 participants
Form validation - In progress