groupe1cir1n/groupe1CIR1Njs
1
0
Fork 0
mirror of https://github.com/groupe1cir1n/groupe1CIR1Njs.git synced 2026-01-18 16:37:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

End of the contact JS implementation

Browse Source
This commit is contained in:
Félix MARQUET
2023-05-13 15:04:28 +02:00
parent 17dd9db494
commit 9244233b86
5 changed files with 96 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.idea/discord.xml generated Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DiscordProjectSettings">
<option name="show" value="PROJECT_FILES" />
<option name="description" value="" />
</component>
</project>

13
contacts.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<title> Contacts </title>
<script src="src/js/InfosEtContact/contacts/contacts.js" defer></script>
<script src="https://kit.fontawesome.com/5b8b37978c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="src/css/appear.css">
<link rel="stylesheet" href="src/css/style_contacts.css">
@@ -46,20 +47,24 @@
</div>
<h1 id = text><strong>Contactez le responsable de l’équipe</strong> <br>(Maher Jridi - maher.jridi@isen-ouest.yncrea.fr)</h1>
<form action="contacts.html" method="get" class="formulaire">
<a id="usrnError"></a>
<div class="center">
<div class="input-container">
<img class="icon" src="/src/img/svg/user-solid.svg">
<input class="input-field" type="text" placeholder="Prénom Nom" name="usrnm">
<input class="input-field" type="text" placeholder="Prénom Nom" name="usrnm" id="usrnInp">
</div>
</div>
<a id="emailError"></a>
<div class="center">
<div class="input-container">
<img class="icon" src="/src/img/svg/at-solid.svg">
<input class="input-field" type="text" placeholder="email@exemple.com" name="email">
<input class="input-field" type="text" placeholder="email@exemple.com" name="email" id="emailInp">
</div>
</div>
<textarea name="textarea1" placeholder="Votre message (1000 caractères maximum)" rows="5" cols="50"></textarea><br>
<button class="btn" type="submit">Envoyer</button>
<a id="textarea1Error"></a>
<br>
<textarea name="textarea1" placeholder="Votre message (1000 caractères maximum)" rows="5" cols="50" id="textarea1Inp"></textarea><br>
<button id="submitBtn" class="btn">Envoyer</button>
</form>
<img src="src/img/LabISEN.png" alt="Logo du LabISEN">
<footer>

16
src/css/style_contacts.css
View File

@@ -54,4 +54,20 @@ img{
display: flex;
text-align: center;
justify-content: center;
}
.btn-notvalid{
background-color: #7d7d7d;
}
#usrnError{
color: red;
}
#emailError{
color: red;
}
#textarea1Error{
color: red;
}

64
src/js/InfosEtContact/contacts/contacts.js
View File

@@ -0,0 +1,64 @@
function validateForm() {
var prenomNom = document.getElementById("usrnInp").value;
var email = document.getElementById("emailInp").value;
var message = document.getElementById("textarea1Inp").value;
var prenomNomRegex = /^[a-zA-Z]+\s[a-zA-Z]+$/;
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var isPrenomNomValid = prenomNomRegex.test(prenomNom);
var isEmailValid = emailRegex.test(email);
var isMessageValid = message.length >= 20 && message.length <= 1000;
//console.log(isPrenomNomValid, isEmailValid, isMessageValid);
//console.log(prenomNom, email, message);
var submitBtn = document.getElementById("submitBtn");
var prenomNomError = document.getElementById("usrnError");
var emailError = document.getElementById("emailError");
var messageError = document.getElementById("textarea1Error");
if (isPrenomNomValid) {
prenomNomError.innerHTML = "";
} else {
prenomNomError.innerHTML = "Le prénom et le nom doivent contenir 2 mots séparés d'un espace";
}
if (isEmailValid) {
emailError.innerHTML = "";
} else {
emailError.innerHTML = "L'adresse email doit être valide";
}
if (isMessageValid) {
messageError.innerHTML = "";
} else {
messageError.innerHTML = "Le message doit contenir entre 20 et 1000 caractères";
}
if (isPrenomNomValid && isEmailValid && isMessageValid) {
submitBtn.disabled = false;
submitBtn.classList.remove("btn-notvalid");
} else {
submitBtn.disabled = true;
//Edit css for the button to be gray
submitBtn.classList.add("btn-notvalid");
}
}
document.getElementById("submitBtn").addEventListener("click", function() {
var random = Math.floor(Math.random() * 2);
if (random === 0) {
alert("Vous avez gagné ! Votre message a bien été envoyé !");
}
else{
alert("Ratio! Vous avez perdu! Vous devez tous recommencer!")
window.location.reload();
}
});
// appeler la fonction validateForm à chaque fois qu'un champ est modifié
document.getElementById("usrnInp").addEventListener("input", validateForm);
document.getElementById("emailInp").addEventListener("input", validateForm);
document.getElementById("textarea1Inp").addEventListener("input", validateForm);
console.log("contacts.js chargé !");

3
src/js/InfosEtContact/contacts/contactsFunc.js
View File

@@ -1,3 +0,0 @@
function InvalidForm(){
}