Validate the Input for the react form - reactjs

Question

NewBie in React so bear any non-technical words. I have to work on form with given code below the code is somewhat incomplete in which I have to achieve validation on each input. If any error occurs displaying it below the input
element inside the span element. on onChange handler state gets updated whereas respective validation function is called
import React from "react";
class Form extends React.component{
state = {
firstName: { value: "" },
LastName: { value: "" }
};
handleInputChange = (e, validationFun) => {
e.preventDefault();
const target = e.target;
const inputName = target.name;
const inputValue = target.value;
this.setState({
[inputName]: {
value: inputValue,
...validationFun(inputValue)
}
});
};
render() {
return (
<div>
<div>
<label>First Name</label>
<input
type="text"
name="firstName"
value={this.state.firstName.value}
onChange={event =>
this.handleInputChange(event, this.validatefirstName)
}
/>
</div>
<div>
<label>First Name</label>
<input
type="text"
name="LastName"
value={this.state.LastName.value}
onChange={event =>
this.handleInputChange(event, this.validateLastName)
}
/>
</div>
</div>
);
}
validatefirstName = firstName => {
if (!firstName) {
return {
validateStatus: "error",
errorMsg: "firstName may not be empty"
};
} else if (firstName.length > 12) {
return {
validationStatus: "error",
errorMsg: `firstName is too long 11 characters allowed.)`
};
} else {
return {
validateStatus: "success",
errorMsg: null
};
}
};
validateLastName = LastName => {
if (!LastName) {
return {
validateStatus: "error",
errorMsg: "LastName may not be empty"
};
} else if (LastName.length > 12) {
return {
validationStatus: "error",
errorMsg: `LastName is too long 11 characters allowed.)`
};
} else {
return {
validateStatus: "success",
errorMsg: null
};
}
};
};

Answer 1

Yep after lot work, I was able to find Solution
import React from "react";
class Form extends React.component{
state = {
firstName: { value: "" },
LastName: { value: "" }
};
handleInputChange = (e, validationFun) => {
e.preventDefault();
const target = e.target;
const inputName = target.name;
const inputValue = target.value;
this.setState({
[inputName]: {
value: inputValue,
...validationFun(inputValue)
}
});
};
render() {
return (
<div>
<div>
<label>First Name</label>
<input
type="text"
name="firstName"
value={this.state.firstName.value}
onChange={event =>
this.handleInputChange(event, this.validatefirstName)
}
/>
<span style={{ color: "red" }}>
{this.state.firstName.errorMsg}
</span>
</div>
<div>
<label>Last Name</label>
<input
type="text"
name="LastName"
value={this.state.LastName.value}
onChange={event =>
this.handleInputChange(event, this.validateLastName)
}
/>
<span style={{ color: "red" }}>
{this.state.LastName.errorMsg}
</span>
</div>
</div>
);
}
validatefirstName = firstName => {
if (!firstName) {
return {
validateStatus: "error",
errorMsg: "firstName may not be empty"
};
} else if (firstName.length > 12) {
return {
validationStatus: "error",
errorMsg: `firstName is too long 11 characters allowed.)`
};
} else {
return {
validateStatus: "success",
errorMsg: null
};
}
};
validateLastName = LastName => {
if (!LastName) {
return {
validateStatus: "error",
errorMsg: "LastName may not be empty"
};
} else if (LastName.length > 12) {
return {
validationStatus: "error",
errorMsg: `LastName is too long 11 characters allowed.)`
};
} else {
return {
validateStatus: "success",
errorMsg: null
}}
};