formulaire html css js
peko Le 22 janvier 2022 à 11:59 (Édité le 22 janvier 2022 à 12:01)
Bonjour , jespère que vous allez bien.
je viens ici parce que je suis débutant en js ( j'ai pas beaucoup de base dans le langage pour être franc) et j'ai un probleme avec un projet sur les formulaire. en effet j'ai crée un formulaire avec différents input , je dois faire la vérificaion des différents élement du formulaire qui sont pseudo , age mpd et vérification mdp.
De plus lorsque je cliquerais sur le bouton envoyé , les certaines information doivent apparaitre dans un tableau en dessous qui contient les éléments suivant :
- ID : le numéro d'inscription de la personne -Pseudo
- Age
- Date et heure d'envoi
- Hash du mot de passe
- Un bouton pour supprimer une ligne (l'ID n'est pas affecté par cela)
de plus A l'envoi les choses suivantes doivent être effectuées/vérifiées :
- Que les données soient conformes (sinon le formulaire n'est pas envoyé et l'utilisateur est avertis)
- Age uniquement composé de chiffrespseudo de moins de 20 char
- Les deux mots de passe correspondent
- S'il manque une des informations obligatoires (notées par une *)
- Le formulaire doit être vidé, sauf s'il n'est pas conforme
- Si les informations envoyées sont déjà présentent dans le tableau, alors ce dernier n'est pas modifié
- Il ne faut pas qu'il y ait de faille XSS
j'aimerais svp et si possible avoir des informations sur lesquel je pourrais travailler ```html <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/formulaire.css">
<title>FORMULAIRE TABLEAU</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<form id="formulaire">
<h1>INSCRIPTION</h1>
<div class="conteneur">
<div class="left_side">
<label for="name">Pseudo: </label>
<input type="text" name="pseudo" id="pseudo" placeholder="assassin314">
<i class=" fas fa-user "></i>
<p id="error"></p>
</div>
<div class="left_side ">
<label for="name ">Age:</label>
<input type="number " name="age " id="Age " placeholder="18ans ">
<i class="fas fa-birthday-cake "></i>
<p id="error"></p>
</div>
<div class="left_side ">
<label for="name ">Mot de passe: </label>
<input type="password" name="mot de passe" id="mdp ">
<i class="fas fa-eye "></i>
<p id="error"></p>
</div>
<div class="left_side ">
<label for="name ">Vérification du mot de passe: </label>
<input type="password" name="mobile " id="mdpV ">
<i class="fas fa-eye "></i>
<p id="error"></p>
</div>
<div class="botom ">
<div class="envoyer ">
<button type="submit" id="submit">S'INSCRIRE</button>
</div>
<div class="mdp-new_account ">
<a href="# ">déja un compte</a> / <a href="# ">mot de passe oublié ?</a>
</div>
</div>
</div>
</form>
<table>
</table>
<script src="../javascript/main.js">
</script>
</body>
</html>```
```js
document.getElementById('formulaire').addEventListener("submit", function(e) {
//e est le premier argument de la fonction
e.preventDefault(); // éviter le comportement par défaut du formulaire
var error;
var pseudo = document.getElementById("pseudo");
var age = document.getElementById("Age");
var mdp1 = document.getElementById("mdp");
var mdp2 = document.getElementById("mdpV");
console.log(pseudo);
if (!pseudo.value) {
error = "le camps est vide";
}
if (!age.value) {
error = "le camps est vide";
}
if (!mdp1.value) {
error = "le camps est vide";
}
if (!mdp2.value) {
error = "le camps est vide";
}
if (error) {
e.preventDefault();
document.getElementById("error").innerHTML = error;
return false;
} else {
alert("formulaire envoyé");
}
});```
```css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin-top: 40px;
margin-bottom: 40px;
color: black;
display: flex;
background-color: aliceblue;
justify-content: space-around;
align-items: center;
min-height: 100vh;
}
#formulaire {
box-shadow: 0 35px 35px;
background-color: aquamarine;
padding: 40px;
border-radius: 15px;
}
h1 {
display: flex;
justify-content: center;
border-bottom: 1px solid rgb(119, 130, 140);
padding-bottom: 10px;
font-family: 'Roboto', sans-serif;
}
.left_side {
padding-top: 10px;
padding-bottom: 20px;
display: flex;
position: relative;
flex-direction: column;
}
label {
padding-bottom: 5px;
}
input {
height: 30px;
border: 1px solid burlywood;
border-radius: 5px;
padding-left: 30px;
outline: 1px solid burlywood;
;
}
.botom {
display: flex;
justify-content: center;
flex-direction: column;
}
.botom .envoyer {
display: flex;
justify-content: center;
padding-bottom: 10px;
}
.botom .envoyer button {
padding: 10px;
border-radius: 20px;
}
.botom .envoyer button:hover {
background-color: burlywood;
padding: 10px;
border-radius: 20px;
}
i {
position: relative;
left: 0;
top: -25px;
padding-left: 10px;
}
a {
text-decoration: none;
color: black;
}
.fa-eye {
display: flex;
justify-content: flex-start;
}```
