I am creating a User registration form using React JS and as I have defined the fields and its validations along with the submit handler, it does not console log Hello World after pressing submit button. It doesn’t seem to function at all. I am sharing my code below:
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import "./Userform.css";
import axios from "axios";
function Userform() {
const schema = yup.object().shape({
name: yup.string().required("Name is required"),
dobOrAge: yup.string().required("Age is required"),
sex: yup.string().required("Sex is required"),
mobile: yup
.string()
.matches(
/^[6-9]d{9}$/,
"Mobile number must be a valid Indian mobile number"
)
.nullable(),
idType: yup.string().required("ID type is required"),
id: yup.string().when("idType", {
is: "Aadhar",
then: yup
.string()
.matches(/^d{12}$/, "Govt Id must be a valid 12-digit numeric string"),
otherwise: yup
.string()
.matches(
/^[A-Za-z]{5}d{4}[A-Za-z]{1}$/,
"Govt Id must be a valid 10-digit alpha-numeric string"
),
}),
email: yup.string("Email must be a valid email address").nullable(),
emergencyContactNumber: yup
.string()
.matches(
/^[6-9]d{9}$/,
"Emergency Contact Number must be a valid Indian mobile number"
)
.nullable(),
guardianTitle: yup.string().nullable(),
guardianName: yup.string().nullable(),
address: yup.string().nullable(),
country: yup.string().nullable(),
state: yup.string().nullable(),
pincode: yup.string().nullable(),
city: yup.string().nullable(),
occupation: yup.string().nullable(),
nationality: yup.string().nullable(),
religion: yup.string().nullable(),
maritalStatus: yup.string().nullable(),
bloodGroup: yup.string().nullable(),
});
const resolver = yupResolver(schema);
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm({
resolver,
});
const [message, setMessage] = useState(null);
const onSubmithandler = (data) => {
console.log(data);
};
return (
<div className="form-container">
<form onSubmit={handleSubmit(onSubmithandler)}>
<div>
<h2 className="form-heading">Personal Details</h2>
<label className="form-label"> Name: </label>
<input
className="form-input"
type="text"
placeholder="Enter your full name"
{...register("name", { required: true })}
/>
{errors.name && <p className="form-error">{errors.name.message}</p>}
</div>
<div>
<label className="form-label">Sex :</label>
<input
className="form-input"
type="text"
{...register("sex", { required: true })}
/>
{errors.sex && <p className="form-error">{errors.sex.message}</p>}
</div>
<div>
<label className="form-label">Mobile:</label>
<input className="form-input" type="text" {...register("mobile")} />
{errors.mobile && (
<p className="form-error">{errors.mobile.message}</p>
)}
</div>
<div>
<label>
ID Type:
<select {...register("idType")}>
<option value="">Select ID Type</option>
<option value="Aadhar">Aadhar</option>
<option value="PAN">PAN</option>
</select>
{errors.idType && <p>{errors.idType.message}</p>}
</label>
<label>
Govt Issued ID:
<input type="text" {...register("id")} />
{errors.id && <p>{errors.id.message}</p>}
</label>
</div>
<h2 className="form-heading">Contact Details</h2>
<div>
<label className="form-label">Email:</label>
<input className="form-input" type="email" {...register("email")} />
{errors.email && <p className="form-error">{errors.email.message}</p>}
<label className="form-label">Emergency contact number:</label>
<input
className="form-input"
type="text"
{...register("emergencyContactNumber")}
/>
{errors.emergencyContactNumber && (
<p className="form-error">
{errors.emergencyContactNumber.message}
</p>
)}
</div>
<div>
<label className="form-label">Guardian Details:</label>
<select className="form-select" {...register("guardianTitle")}>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
</select>
<input
className="form-input"
type="text"
{...register("guardianName")}
/>
{errors.guardianName && (
<p className="form-error">{errors.guardianName.message}</p>
)}
</div>
<h2 className="form-heading">Address Details</h2>
<div>
<label className="form-label">Address:</label>
<input className="form-input" type="text" {...register("address")} />
{errors.address && (
<p className="form-error">{errors.address.message}</p>
)}
<label className="form-label">Country:</label>
<input className="form-input" type="text" {...register("country")} />
{errors.country && (
<p className="form-error">{errors.country.message}</p>
)}
</div>
<div>
<label className="form-label">State:</label>
<input className="form-input" type="text" {...register("state")} />
{errors.state && <p className="form-error">{errors.state.message}</p>}
</div>
<div>
<label className="form-label">Pincode:</label>
<input className="form-input" type="text" {...register("pincode")} />
{errors.pincode && (
<p className="form-error">{errors.pincode.message}</p>
)}
</div>
<div>
<label className="form-label">City:</label>
<input className="form-input" type="text" {...register("city")} />
{errors.city && <p className="form-error">{errors.city.message}</p>}
</div>
<h2 className="form-heading">Other Details</h2>
<div>
<label className="form-label">Occupation</label>
<input
className="form-input"
type="text"
{...register("occupation")}
/>
{errors.occupation && (
<p className="form-error">{errors.occupation.message}</p>
)}
</div>
<div>
<label className="form-label">Religion</label>
<select className="form-select" {...register("religion")}>
<option value="Hindu">Hindu</option>
<option value="Muslim">Muslim</option>
<option value="Christian">Christian</option>
<option value="Sikh">Sikh</option>
<option value="Jain">Jain</option>
<option value="Buddhist">Buddhist</option>
</select>
</div>
<div>
<label className="form-label">Marital status</label>
<select className="form-select" {...register("marital")}>
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
</select>
</div>
<div>
<label className="form-label">Blood Group</label>
<select className="form-select" {...register("blood")}>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</div>
<div>
<label className="form-label">Nationality</label>
<input
className="form-input"
type="text"
{...register("nationality")}
/>
{errors.nationality && (
<p className="form-error">{errors.nationality.message}</p>
)}
</div>
<button type="submit">Submit</button>
{message && <p>{message}</p>}
</form>
</div>
);
}
export default Userform;
I am filling in the form but as I submit it is not showing Hello World. Please help as to what should be done.
And in the console, I am also getting this error which is not getting solved at all:
Uncaught TypeError: Cannot read properties of undefined (reading 'set')
at setup (react_devtools_backend_compact.js:15169:17)
at Module.<anonymous> (react_devtools_backend_compact.js:15162:1)
at __webpack_require__ (react_devtools_backend_compact.js:20:30)
at react_devtools_backend_compact.js:84:18
at react_devtools_backend_compact.js:87:10