I am trying to validate my registration form but I'm getting this error and I can't solve it. my form submit button goes to handleRegistration
which should validate the form first then submit. I was trying to follow the example in this link https://www.itsolutionstuff.com/post/password-and-confirm-password-validation-in-reactexample.html
handleRegistration(event) {
event.preventDefault();
if (this.validate()) {
this.toggleModal();
console.log(this.state);
let input = {};
input["name"] = "";
input["email"] = "";
input["password"] = "";
input["confirmPassword"] = "";
input["age"] = "";
input["gender"] = "";
this.setState({
input: input
});
console.log(this.state)
alert('Demo Form is submited');
}
}
validate() {
let input = this.state.input;
let errors = {};
let isValid = true;
if (!input["fullname"]) {
isValid = false;
errors["fullname"] = "Please enter your name.";
}
if (!input["email"]) {
isValid = false;
errors["email"] = "Please enter your email Address.";
}
if (typeof input["email"] !== "undefined") {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
if (!pattern.test(input["email"])) {
isValid = false;
errors["email"] = "Please enter valid email address.";
}
}
if (!input["password"]) {
isValid = false;
errors["password"] = "Please enter your password.";
}
if (!input["confirmPassword"]) {
isValid = false;
errors["confirmPassword"] = "Please confirm your password.";
}
if (!input["age"]) {
isValid = false;
errors["age"] = "Please Enter your age.";
}
if (typeof input["password"] !== "undefined" && typeof input["confirmPassword"] !== "undefined") {
if (input["password"] != input["confirmPassword"]) {
isValid = false;
errors["password"] = "Passwords don't match.";
}
}
this.setState({
errors: errors
});
return isValid;
}
handleChange(event) {
let input = this.state.input;
input[event.target.name] = event.target.value;
this.setState({
input
});
}
I am initalizing my input and errors objects in my state here
this.state = {
isNavOpen: false,
isModalOpen: false,
isRegistrationModalOpen: false,
input: {},
errors: {}
}
and my registration form is structured like that
<Form onSubmit={this.handleRegistration}>
<FormGroup>
<Input type="text" id="fullname" name="fullname" placeholder="Full Name" value={this.state.input.name} onChange={this.handleChange}></Input>
<div className="text-danger">{this.state.errors.name}</div>
</FormGroup>
....
</Form>
Thank you