Answered by:
react validation issues

Question
-
User1034446946 posted
hi
i am trying to finish off my validation however i am having two problems
I want doa simple validation to validate length however this isn't work
when i do value.length >= 6
the validation works when value.length is 7 but why isn't it working on 6?
the other issue i am having is with useDispatch react-redux hook
if i do with above calculation with the event.target.value it works as above, however if i use the state vaue it doesn't validate until a length of 8.
i have tried to chain the functions inside the dispatch and it doesn change anything
any suggestions would be appriciated.
Sunday, September 29, 2019 2:33 PM
Answers
-
User-474980206 posted
if you are using controlled inputs, then the validator should only look at state:
// assume a simple validation library import validationMethods from "validationMethods"; export default function Validate({value, rules}) = { if (validationRules) { for (cont i = 0; i < rules.length; ++i) { if (!validationMethods.test(rules[i],value)) { return <div class="invalid-feedback">rules[i].message</div>; } } } return null; } and use like: <input type="text" name="firstName" class="form-control" value={props.firstName} onChange={(e) => dispatch({type:"firstName", value: e.target.value})} /> <Validate value={props.firstName} rules={{rule:"required", message:"Please enter value"}} />
of course you can create a component that encapsulates both and also sets the invalid class on the input also
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, September 30, 2019 3:33 PM
All replies
-
User1034446946 posted
right i have to working using event.target.value but how do i get it to work against the state value?
Sunday, September 29, 2019 3:01 PM -
User-474980206 posted
if you are using controlled inputs, then the validator should only look at state:
// assume a simple validation library import validationMethods from "validationMethods"; export default function Validate({value, rules}) = { if (validationRules) { for (cont i = 0; i < rules.length; ++i) { if (!validationMethods.test(rules[i],value)) { return <div class="invalid-feedback">rules[i].message</div>; } } } return null; } and use like: <input type="text" name="firstName" class="form-control" value={props.firstName} onChange={(e) => dispatch({type:"firstName", value: e.target.value})} /> <Validate value={props.firstName} rules={{rule:"required", message:"Please enter value"}} />
of course you can create a component that encapsulates both and also sets the invalid class on the input also
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, September 30, 2019 3:33 PM -
User1034446946 posted
Thanks for the info, really appriciate it.
I have moved my validationMethods to the error component,previously it was in the form element.
previously i had
onChangeNameHandler = event =>{
dispatch({type:'UPDATE_NAMEE', payload:event.target.value})
formFieldValidation(name.Validators, name.value)
}then in the error component uses useSelector to get the errors.
I think the reason it was always one step behind was because of dispatch being asyncronos, and the state value not being updated when the validation was bing done.
So is there a standard way to prevent this? so i know how to deal wih it in the futurw
Tuesday, October 1, 2019 11:17 AM