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.

Answer 1

User1034446946 posted

right i have to working using event.target.value but how do i get it to work against the state value?

Answer 2

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

Answer 3

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