locked
react validation issues RRS feed

  • 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