I have a React project where I am using EmailJS, and I need the checkbox to be required before sending the form, or register the value of the checkbox in the email template. It's value is currently not being registered.
This is some of the code:
const ApplyForm = (props) => {
const [formData, setFormData] = useState({
student_name: "",
adress: "",
postnr: "",
city: "",
birthday: "",
otherschool: "",
startdate: "",
firstgrade: "",
secondgrade: "",
thirdgrade: "",
fourthgrade: "",
fifthgrade: "",
sixthgrade: "",
seventhgrade: "",
mom_name: "",
mom_adress: "",
mom_postnr: "",
mom_city: "",
mom_phone: "",
mom_email: "",
children_age: "",
other: "",
why: "",
});
const [formError, setFormError] = useState();
const [formSuccess, setFormSuccess] = useState();
function validateEmail(email) {
const regEX = /\S+@\S+\.\S+/;
const patternMatches = regEX.test(email);
return patternMatches;
}
const validateForm = () => {
if (formData.student_name.length < 3) {
setFormError("ERROR! Navn må inneholde minst 3 karakterer");
setTimeout(() => {
setFormError(null);
}, 5000);
return false;
} else if (!validateEmail(formData.mom_email)) {
setFormError("ERROR! Fyll inn en gyldig e-postadresse");
setTimeout(() => {
setFormError(null);
}, 5000);
return false;
} else if (formData.adress.length < 3) {
setFormError("ERROR! Adressen må inneholde minst 3 karakterer");
setTimeout(() => {
setFormError(null);
}, 5000);
return false;
} else if (formData.postnr.length < 4) {
setFormError("ERROR! Fyll inn et gyldig postnummer");
setTimeout(() => {
setFormError(null);
}, 5000);
return false;
} else if (formData.city.length < 2) {
setFormError("ERROR! Fyll inn poststed");
setTimeout(() => {
setFormError(null);
}, 5000);
return false;
} else {
return true;
}
};
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const onSubmit = (e) => {
e.preventDefault();
if (validateForm()) {
send("service_loremipsum", "template_loremipsum", formData, "loremipsum")
.then((response) => {
console.log("SUCCESS!", response.status, response.text);
setFormSuccess("Søknaden har blitt sendt!");
setFormData({
student_name: "",
adress: "",
postnr: "",
city: "",
birthday: "",
otherschool: "",
startdate: "",
mom_name: "",
mom_adress: "",
mom_postnr: "",
mom_city: "",
mom_phone: "",
mom_email: "",
children_age: "",
other: "",
why: "",
consent: "",
});
setTimeout(() => {
setFormSuccess(null);
}, 5000);
})
.catch((err) => {
console.log("FAILED...", err);
});
}
};
return (
<>
<h1>Søk skoleplass</h1>
<Container fluid>
<Row className="justify-content-center align-items-center">
<Col md={6}>
<h2 className="form_h2">Opplysninger om eleven</h2>
{formError && <p className="setFormError">{formError}</p>}
{formSuccess && <p className="setFormSuccess">{formSuccess}</p>}
<form className="apply_form" onSubmit={onSubmit}>
<fieldset>
<label htmlFor="student_name" id="student_name">
Fullt navn
</label>
<input
className="apply_input"
type="text"
id="student_name"
name="student_name"
value={formData.student_name}
onChange={handleChange}
/>
<label htmlFor="adress" id="adress">
Adresse
</label>
<input
className="apply_input"
type="text"
id="adress"
name="adress"
value={formData.adress}
onChange={handleChange}
/>
<div className="post_group">
<label htmlFor="postnr" id="postnr">
Postnummer
</label>
<input
className="apply_input"
type="text"
id="postnr"
name="postnr"
value={formData.postnr}
onChange={handleChange}
/>{" "}
</div>
<div className="post_group">
<label htmlFor="city" id="city">
Poststed
</label>
<input
className="apply_input"
type="text"
id="city"
name="city"
value={formData.city}
onChange={handleChange}
/>
</div>
<label htmlFor="birthday" id="birthday">
Fødselsdag
</label>
<input
className="apply_input"
type="date"
id="birthday"
name="birthday"
value={formData.birthday}
onChange={handleChange}
/>
<label htmlFor="otherschool" id="otherschool">
Skal barnet meldes ut av en annen skole? Hvilken?
</label>
<input
className="apply_input"
type="text"
id="otherschool"
name="otherschool"
value={formData.otherschool}
onChange={handleChange}
/>
<label htmlFor="startdate" id="startdate">
Dato for ønsket oppstart
</label>
<input
className="apply_input"
type="text"
id="startdate"
name="startdate"
value={formData.startdate}
onChange={handleChange}
/>
<label className="class_section">Søker til klassetrinn:</label>
<section className="grade">
{" "}
<section className="class">
{" "}
<input
type="checkbox"
id="firstgrade"
name="firstgrade"
value={formData.firstgrade}
onChange={handleChange}
/>
<label
className="inline_label"
htmlFor="firstgrade"
id="firstgrade"
>
1. klasse
</label>
</section>
<section className="class">
{" "}
<input
type="checkbox"
id="secondgrade"
name="secondgrade"
value={formData.secondgrade}
onChange={handleChange}
/>
<label
className="inline_label"
htmlFor="secondgrade"
id="secondgrade"
>
2. klasse
</label>
</section>
<section className="class">
{" "}
<input
type="checkbox"
id="thirdgrade"
name="thirdgrade"
value={formData.thirdgrade}
onChange={handleChange}
/>
<label
className="inline_label"
htmlFor="thirdgrade"
id="thirdgrade"
>
3. klasse
</label>
</section>
<section className="class">
{" "}
<input
type="checkbox"
id="fourthgrade"
name="fourthgrade"
value={formData.fourthgrade}
onChange={handleChange}
/>
<label
className="inline_label"
htmlFor="fourthgrade"
id="fourthgrade"
>
4. klasse
</label>{" "}
</section>
<section className="class">
{" "}
<input
type="checkbox"
id="fifthgrade"
name="fifthgrade"
value={formData.fifthgrade}
onChange={handleChange}
/>
<label
className="inline_label"
htmlFor="fifthgrade"
id="fifthgrade"
>
5. klasse
</label>
</section>
<section className="class">
{" "}
<input
type="checkbox"
id="sixthgrade"
name="sixthgrade"
value={formData.sixthgrade}
onChange={handleChange}
/>
<label
className="inline_label"
htmlFor="sixthgrade"
id="sixthgrade"
>
6. klasse
</label>{" "}
</section>
<section className="class">
{" "}
<input
type="checkbox"
id="seventhgrade"
name="seventhgrade"
value={formData.seventhgrade}
onChange={handleChange}
/>
<label
className="inline_label"
htmlFor="seventhgrade"
id="seventhgrade"
>
7. klasse
</label>
</section>
</section>
<h2 className="form_h2">Opplysninger om foresatte - mor</h2>
<label htmlFor="mom_name" id="mom_name">
Fullt navn
</label>
<input
className="apply_input"
type="text"
id="mom_name"
name="mom_name"
value={formData.mom_name}
onChange={handleChange}
/>
<label htmlFor="mom_adress" id="mom_adress">
Evt annen adresse
</label>
<input
className="apply_input"
type="text"
id="mom_adress"
name="mom_adress"
value={formData.mom_adress}
onChange={handleChange}
/>
<div className="post_group">
<label htmlFor="mom_postnr" id="mom_postnr">
Postnummer
</label>
<input
className="apply_input"
type="text"
id="mom_postnr"
name="mom_postnr"
value={formData.mom_postnr}
onChange={handleChange}
/>{" "}
</div>
<div className="post_group">
<label htmlFor="mom_city" id="mom_city">
Poststed
</label>
<input
className="apply_input"
type="text"
id="mom_city"
name="mom_city"
value={formData.mom_city}
onChange={handleChange}
/>
</div>
<label htmlFor="mom_phone" id="mom_phone">
Telefon
</label>
<input
className="apply_input"
type="text"
id="mom_phone"
name="mom_phone"
value={formData.mom_phone}
onChange={handleChange}
/>
<label htmlFor="mom_email" id="mom_email">
Epost
</label>
<input
className="apply_input"
type="text"
id="mom_email"
name="mom_email"
value={formData.mom_email}
onChange={handleChange}
/>
<h2 className="form_h2">Andre opplysninger</h2>
<label htmlFor="children_age" id="children_age">
Alder på andre barn i familien
</label>
<input
className="apply_input"
type="text"
id="children_age"
name="children_age"
value={formData.children_age}
onChange={handleChange}
/>
<label htmlFor="other" id="other">
Andre opplysninger som er relevante for søknaden:
</label>
<textarea
className="apply_textarea"
id="other"
name="other"
value={formData.other}
onChange={handleChange}
/>
<label htmlFor="why" id="why">
Hvorfor ønsker dere plass hos oss?{" "}
</label>
<textarea
className="apply_textarea"
id="why"
name="why"
value={formData.why}
onChange={handleChange}
/>{" "}
<legend>Samtykke</legend>
<section className="class">
<input
className="checkbox"
type="checkbox"
id="consent"
name="consent"
value={formData.consent}
onChange={handleChange}
/>
<label className="inline_consent">
lorem ipsum
</label>
</section>
<button
className="apply_btn"
type="submit"
id="button"
value="Submit"
>
Send søknad
</button>
</fieldset>
</form>
{formError && <p className="setFormError">{formError}</p>}
{formSuccess && <p className="setFormSuccess">{formSuccess}</p>}
</Col>
</Row>
</Container>
</>
);
};
Do I need to set a State for the checkbox or is it another way to register the value? The value is not being registered so the output doesn't show up in the Emailjs template, even tho I used the id.
Aucun commentaire:
Enregistrer un commentaire