Validation continues when input value is deleted-CodePudding

There are validations for mandatory input fields. Validation works when these fields are unfilled or filled incorrectly. After filling the field I delete it but the validation still works and an error message pops up. I don't want validation to run when input value is deleted.

How can I solve it?

const [nameValidationState, setNameValidationState] = useState({
 error: false,
 helperText: '',
});

const nameOnChange = (event) => {
 if (nameValidator(event.target.value)) {
  setNameValidationState({ error: false, helperText: '' });
  setPaymentInfo({
   ...paymentInfo,
   firstName: event.target.value,
  });
 } else {
   setNameValidationState({ error: true, helperText: 'Please enter your name.' });
   setPaymentInfo({
    ...paymentInfo,
    firstName: null,
   });
 }
};

const handleInputChange = (event) => {
 const { name, value } = event.target;
 setPaymentInfo({ ...paymentInfo, [name]: value });
};

const handleFirstNameChange = (event) => {
 nameOnChange(event);
 handleInputChange(event);
};

html

<AS.TextField
 id="outlined-basic"
 label={t('general.name')}
 variant="outlined"
 sx={{ width: '100%', maxWidth: '500px', margin: 'auto' }}
 InputLabelProps={{
  shrink: true,
 }}
 placeholder=""
 onChange={handleFirstNameChange}
 error={nameValidationState.error}
 helperText={nameValidationState.helperText}
 name="firstName"
 value={paymentInfo.firstName}
/>
<AS.TextField

validator.js

export const nameValidator = (name) => {
  const nameRegex = /^[a-zA-ZwığüşöçĞÜŞÖÇİ] $/;
  return nameRegex.test(name);
};

CodePudding user response：

Changing the nameOnChange method like this will solve the problem.

  const nameOnChange = (event) => {
    if (nameValidator(event.target.value)) {
      setNameValidationState({ error: false, helperText: '' });
      setPaymentInfo({
        ...paymentInfo,
        firstName: event.target.value,
      });
    } else {
      setNameValidationState({ error: true, helperText: 'Please enter your name.' });
      setPaymentInfo({
        ...paymentInfo,
        firstName: null,
      });
    }

    if (event.target.value === '') {
      setNameValidationState({ error: false, helperText: '' });
    }
  };