memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

validation contact

Browse Source
This commit is contained in:
Jean-Daniel Lamontagne 2022-11-01 11:24:21 -04:00
parent 0498024d62
commit 25e2804081
5 changed files with 92 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
GrossesMitaines/grosses-mitaines-ui/package-lock.json generated
View File

@ -25,6 +25,7 @@
"react-devtools": "^4.26.0",
"react-dom": "^18.2.0",
"react-fontawesome": "^1.7.1",
"react-hook-form": "^7.38.0",
"react-icons": "^4.6.0",
"react-router-dom": "^6.4.1",
"react-scripts": "^5.0.1",
@ -15344,6 +15345,21 @@
"react": ">=0.12.0"
}
},
"node_modules/react-hook-form": {
"version": "7.38.0",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.38.0.tgz",
"integrity": "sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==",
"engines": {
"node": ">=12.22.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-icons": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",
@ -29471,6 +29487,12 @@
"prop-types": "^15.5.6"
}
},
"react-hook-form": {
"version": "7.38.0",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.38.0.tgz",
"integrity": "sha512-gxWW1kMeru9xR1GoR+Iw4hA+JBOM3SHfr4DWCUKY0xc7Vv1MLsF109oHtBeWl9shcyPFx67KHru44DheN0XY5A==",
"requires": {}
},
"react-icons": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz",

1
GrossesMitaines/grosses-mitaines-ui/package.json
View File

@ -20,6 +20,7 @@
"react-devtools": "^4.26.0",
"react-dom": "^18.2.0",
"react-fontawesome": "^1.7.1",
"react-hook-form": "^7.38.0",
"react-icons": "^4.6.0",
"react-router-dom": "^6.4.1",
"react-scripts": "^5.0.1",

73
GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js
View File

@ -1,18 +1,63 @@
import React from "react";
import { useEffect } from "react";
import ContactForm from "../components/ContactForm";
import { useForm } from "react-hook-form";
const ContactUs = () => {
export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
useEffect(() => {
document.title = 'Nous contacter';
});
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>
<div className="Contact">
<h1>Contacter-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>
return (
<div className="contactUs">
<ContactForm/>
</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>
export default ContactUs;
<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>
);
}

2
GrossesMitaines/grosses-mitaines-ui/src/pages/Login.js
View File

@ -17,7 +17,7 @@ const Login = () => {
'Accept': 'text/json',
'Content-Type': 'text/json'
},
body: JSON.stringify({ username, password })
//body: JSON.stringify({ username, password })
});
// Partie de display d'erreur ou de redirection (faudrait checker pour se faire un state de connexion avec un cookie pour react).

9
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@ -20,6 +20,15 @@ a {
text-decoration: none;
}
.Contact {
background-color: beige;
text-align: center;
}
.Error_color span {
color: red;
}
.contactUs {
height: 100vh;
}