Question 218292 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Bootstrap pattern validation not working

Trying to get input validation to work on a React-bootstrap form using field configuration

const TextInput = (props) => {
    const [text, setText] = useState('');
    const {
        type,
        colProps,
        register,
        errors,
        fieldInfo,
        ...restProps
    } = props;
    const { label, name, value, validation } = fieldInfo || {};
    
    const validatePattern = (input) =>{
        const regex = new RegExp(validation?.pattern?.value);
        
        return regex.test(input)
    }
    
    return (
    <Form.Group as={Col} {...colProps} >
        {label}
        <Form.Control
            type ={type}
            name={name}
            value={value}
            defaultValue = {fieldInfo?.defaultValue ?fieldInfo?.defaultValue:''}
            {...restProps}
            {...register(name {
            ...validation
            })}
            isValid={validatePattern(value)} 
        /* tried doing this with onChange to track input but onChange doesnt fire... and value is always undefined */
        />
    </Form.Group>
    );
};
    
export default TextInput;

Then using json configuration to define the fieldInfo:

{
    "type": "TEXT_INPUT",
    "colProps": { "sm":"auto" },
    "fieldInfo": {
        "label": "Case Number",
        "name": "caseNumber",
        "validation" :{
            "pattern": {
                "value": "^[0-9]{8,12}$",
                "message": "Input is Numeric, larger than 8, less than 13"
            },
            "required": {
                "value": true,
                "message": "Case number is required"
            },
            "maxLength": {
                "value": 12,
                "message": "Case number should be less than 13 chars."
            }
        }
    }
}

The required and maxLength validation work but pattern does not trigger errors. I can debug and see they are brought info the browser – just the one does nothing.

As stated above, the validatePattern only sees undefined input even if I try to useState and capture the value entered.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After posting this, I thought I could pass the validate function and the onChange function into register. Thus, to work I updated the register function in the render and handling input with the useState hook.

    const Input = (props) => {
    const[text, setText] = useState('');
    const {
        type,
        colProps,
        register,
        errors,
        fieldInfo,
        ...restProps
    } = props;
    const { label, name, value, validation } = fieldInfo || {};
    
    const validatePattern = () =>{
        if (validation?.pattern?.value && text){
            const isValid = new RegExp(validation?.pattern?.value).test(text);
            return isValid? null: validation?.pattern?.message;
        }
    }
    const handleInput = (e) =>{
        e.preventDefault();
        setText(e.target.value);
    }
    return (
    <Form.Group as={Col} {...colProps} >
        {label}
        <Form.Control
            type ={type}
            name={name}
            value={value}
            defaultValue = {fieldInfo?.defaultValue ?fieldInfo?.defaultValue:''}
            {...restProps}
            {...register(name {
            ...validation,
            onChange: handleInput,
            validate: validatePattern
            })}
            key={input+name}
        />
    </Form.Group>
    );
};
    
export default Input;

    Then, I can leave the json config alone, and let team use that to set regex expressions. The other validations still continue to work as well.


  2. 0

    You missed a comma and the spreed is not needed

    //thisone 
{...register(name {
            ...validation
            })}

//should be 
{...register(name,validation)}

    Since the register function expects a strin and a object for the validation,

    So technically your validation should look like that

          <Form.Control
            type ={type}
            name={name}
            value={value}
            defaultValue = {fieldInfo?.defaultValue ?fieldInfo?.defaultValue:''}
            {...restProps}
            {...register(name, {
              pattern: {
                value: "^[0-9]{8,12}$",
                message: "Input is Numeric, larger than 8, less than 13"
            },
              required: {
                value: true,
                message: "Case number is required"
            },
              maxLength: {
                value: 12,
                message: "Case number should be less than 13 chars."
            }
            })}
            isValid={validatePattern(value)} 
        />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search