63 lines
2.5 KiB
JavaScript
63 lines
2.5 KiB
JavaScript
import { useForm } from "react-hook-form";
|
|
|
|
export default function App() {
|
|
const { register, handleSubmit, watch, formState: { errors } } = useForm();
|
|
const onSubmit = data => console.log(data);
|
|
|
|
return (
|
|
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div className="Contact">
|
|
<h1>Contactez-nous!</h1>
|
|
<div className="Error_color">
|
|
<div>
|
|
<div>
|
|
<label>Nom*</label>
|
|
</div>
|
|
{/* include validation with required or other standard HTML validation rules */}
|
|
<input {...register("Nom", { required: true, minLength: 2 })} />
|
|
{/* errors will return when field validation fails */}
|
|
<div>
|
|
{errors.Nom && errors.Nom.type === 'required' && <span>Vous devez entrer votre nom!</span>}
|
|
{errors.Nom && errors.Nom.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div>
|
|
<label>Email*</label>
|
|
</div>
|
|
<input {...register("Email", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
|
|
<div>
|
|
{errors.Email && errors.Email.type === 'required' && <span>Vous devez entrer une adresse!</span>}
|
|
{errors.Email && errors.Email.type === 'pattern' && <span>Adresse non valide!</span>}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div>
|
|
<label>Téléphone*</label>
|
|
</div>
|
|
<input placeholder="Exemple: 111-111-1111" {...register("Téléphone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
|
|
<div>
|
|
{errors.Téléphone && errors.Téléphone.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
|
|
{errors.Téléphone && errors.Téléphone.type === 'pattern' && <span>Téléphone non valide!</span>}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div>
|
|
<label>Message</label>
|
|
</div>
|
|
<textarea {...register("Message")} />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<input type="submit" value="Contacter" />
|
|
</div>
|
|
|
|
</form>
|
|
);
|
|
} |