Hay validaciones para campos de entrada obligatorios. La validación funciona cuando estos campos no están completos o se completan incorrectamente. Después de llenar el campo, lo elimino, pero la validación aún funciona y aparece un mensaje de error. No quiero que se ejecute la validación cuando se elimina el valor de entrada.

¿Cómo puedo resolverlo?

js

 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

validador.js

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