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?
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
validator.js
export const nameValidator = (name) => {
const nameRegex = /^[a-zA-ZwığüşöçĞÜŞÖÇİ]+$/;
return nameRegex.test(name);
};
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: '' });
}
};