I want to validate all of my inputs in react My validation code looks like this:

let isValid = {
    name: false,
    address: false,
    postcode: false,
    phone: false,
    email: false
};

const validateInput = (e) => {
    let currentInput = e.target

    if (currentInput.name === 'name') {
        if (currentInput.value !== 'undefined' && currentInput.value.match(/^[a-zA-Z] $/)) {
            isValid.name = true;
        } else {
            isValid.name = false;
        }
    }

    if (currentInput.name === 'address') {
        if (currentInput.value !== 'undefined') {
            isValid.address = true;
        } else {
            isValid.address = false;
        }
    }

    if (currentInput.name === 'postcode') {
        if (currentInput.value !== undefined && currentInput.value.match(/^[0-9] [-] [0-9] $/) && currentInput.value.length > 4) {
            isValid.postcode = true;
        } else {
            isValid.postcode = false;
        }
    }

    if (currentInput.name === 'phone') {
        if (currentInput.value !== 'undefined' && currentInput.value.match(/^[0-9] $/) && currentInput.value.length > 7) {
            isValid.phone = true;
        } else {
            isValid.phone = false;
        }
    }

    if (currentInput.name === 'email') {
        if (currentInput.value !== 'undefined' && currentInput.value.match(/^(([^<>()[\]\\.,;:\s@"] (\.[^<>()[\]\\.,;:\s@"] )*)|(". "))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$/)) {
            isValid.email = true;
        } else {
            isValid.email = false;
        }
    }

    console.log(isValid)
}

For example when i type correct value in "Name" isValid.name gets value true, then when i write somethink in "address" isValid.address gets true, but isValid.name false How to fix it?

{requiredInformations.map((el) => (
        <>
            <Label>{el.label}</Label>
            <Input type={el.type} name={el.name} required onChange={(e) => { getInputValue(e); validateInput(e) }} />
        </>
    ))}

CodePudding user response：

I suggest you try to use react-joi library for validation React-Joi-Validation Its easy and simple to use, and you can achieve what you are trying here in your code by just reading the first page on their npm package main page.

CodePudding user response：

You need to get yourself familiar with terms like "state" , "props", "component lifecycle", etc. Build a simple component using a guide on youtube, you can find plenty of them.

Meanwhile, here is a simple component that validates inputs:

function App() {
  const [name, setName] = React.useState('');
  const [address, setAddress] = React.useState('');

  const isValid = React.useMemo(() => {
    const result = {
      name: false,
      address: false,
    };

    if (name.match(/^[a-zA-Z] $/)) {
      result.name = true;
    } else {
      result.name = false;
    }

    if (address !== '') {
      result.address = true;
    } else {
      result.address = false;
    }

    return result;
  }, [name, address]);

  return (
    <div>
      <input
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      {isValid.name ? <p>Name is valid</p> : <p>Name is invalid</p>}

      <br />

      <input
        placeholder="Address"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />

      {isValid.address ? <p>Adress is valid</p> : <p>Adress is invalid</p>}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>


<div id="root">
</div>