How to implement two methodes from validation on a form in the react?-CodePudding

I have a project that is only allowed me to change this file (file below). Other files are complete, for this reason, I do not place these in here (also do not lengthen the code). My question is only about the implementation of two methods from validation in this file.

command:

An error is not displayed during the first focus on input until taken focus from it. If there is an error, it displays. and next times, during of the changing if encounter with an error, the same time displays.

I implemented the first section from the above command, how do I the second section in the same file? With 'useEffect'? How? Thanks for any helping.

input.js

import {useState} from "react";
import {validate} from './validators';

const INPUT_STATES = { /*this is not used!*/
  UNTOUCHED: 'UNTOUCHED',
  VALID: 'VALID',
  INVALID: 'INVALID'
};

const myValidate= validate; /*validate is the my validation function*/

const Input = props => {
   const [value,setValue] = useState('');
   const [validate,setValidate] = useState(true);

   const handleChange = (e) => {
       setValue(e.target.value);
   }

   const handleValidate = () => {
       const Validate = myValidate(value,props.validators);
       setValidate(Validate);
   }

   return (
     <div className={`form-input ${validate ? '' : 'form-input--invalid'}`} data-testid="form-input">
       <label htmlFor={props.id}>{props.label}</label>
       <input value={value} type={props.type} id={props.id} onChange={handleChange} onBlur={handleValidate} />
       <p>{validate ? '' : props.errorText}</p>
     </div>
   )
};

export default Input;

CodePudding user response：

I solved the above problem, by adding two If inside handleChange and handleValidate. Also, I defined another useState.

Also, I changed first parameter from myValidate, from value to e.target.value.

input.js:

import React from "react";
import {useState} from "react";
import {validate} from './validators';/*This file is cantains validation rulles.*/

const myValidate = validate; /*validate is the my validation function*/
const Input = props => {
   const [value,setValue] = useState('');
   const [validate,setValidate] = useState(true);
   const [valid,setValid] = useState('VALID');

   const handleChange = (e) => {
       setValue(e.target.value);
       if(valid === 'INVALID'){
           handleValidate(e);
       }
   }
   const handleValidate = (e) => {
       const Validate = myValidate(e.target.value,props.validators);
       setValidate(Validate);
       if(!Validate){
           setValid('INVALID');
       }
   }
   return (
     <div className={`form-input ${validate ? '' : 'form-input--invalid'}`} data-testid="form-input">
       <label htmlFor={props.id}>{props.label}</label>
       <input value={value} type={props.type} id={props.id} onChange={handleChange} onBlur={handleValidate} />
       <p>{validate ? '' : props.errorText}</p>
     </div>
   )
};

export default Input;

Now:

An error is not displayed during the first focus on input until taken focus from it. If there is an error, it displays. and next times, during of the changing if encounter with an error, the same time displays.