I need to validate multiple input fields using React. I am using a simple if-else block for each input field but I would like to optimize my code and make it better. I feel there can be a better way to validate multiple input fields.
validateForm = () => {
const {
firstName, lastName, mobileNo, city, empType, salary
} = this.state;
if (firstName !== '') {
this.setState({
firstNameMsg: '',
validFirstName: false
});
} else {
this.setState({
firstNameMsg: 'Please enter a vaild first name.',
validFirstName: true
});
}
if (lastName !== '') {
this.setState({
lastNameMsg: '',
validLastName: false
});
} else {
this.setState({
lastNameMsg: 'Please enter a vaild last name.',
validLastName: true
});
}
if (mobileNo.match(/^(\+\d{1,3}[- ]?)?\d{10}$/) && !(mobileNo.match(/0{5,}/))) {
this.setState({
mobileNoMsg: '',
validMobileNo: false
});
} else {
this.setState({
mobileNoMsg: 'Please enter a vaild mobile number.',
validMobileNo: true
});
}
if (city !== '') {
this.setState({
cityMsg: '',
validCity: false
});
} else {
this.setState({
cityMsg: 'Please enter a vaild city.',
validCity: true
});
}
if (empType !== 'Self-Employed') {
this.setState({
empTypeMsg: '',
validEmpType: false
});
} else {
this.setState({
empTypeMsg: 'Some msg',
validEmpType: true
});
}
if (salary !== '') {
this.setState({
salaryMsg: '',
validSalary: false
});
} else {
this.setState({
salaryMsg: 'Please enter a vaild salary.',
validSalary: true
});
}
}
setState()
as well? \$\endgroup\$setState()
is native to react \$\endgroup\$