I’m doing a Contact form and when I’m using the error messages when the infos aren’t correct it works but I can’t remove the messages once it’s corrected.
What’s wrong/missing in my code please?
Here’s my code :
// Get Data
const nom = document.querySelector("#nom");
const prenom = document.querySelector("#prenom");
const email = document.querySelector("#email");
const message = document.querySelector("#message");
const success = document.querySelector("#success");
const errorNodes = document.querySelectorAll(".error");
// Validate Data
clearMessages ();
let errorFlag = false;
function validateForm(){
errorNodes[0].innerText = "";
errorNodes[1].innerText = "";
if(nom.value.length < 1){
errorNodes[0].innerText = "Le nom ne peut pas être vide.";
errorFlag = true;
}
if(prenom.value.length < 1){
errorNodes[1].innerText = "Le prénom ne peut pas être vide.";
errorFlag = true;
}
if(!errorFlag){
success.innerText = "Message envoyé!";
}
}
// Clear error / success messages
function clearMessages(){
for (let i = 0; i < errorNodes.length; i++){
errorNodes[i].innerText = "";
}
success.innerText = "";
}
// Check if email is valid
function emailIsValid(email){
let pattern = /\S+@\S+\.\S+/;
return pattern.test(email);
}* {
font-family: Arial;
font-size: 16px;
}
body {
background: #5a8cdb;
}
form {
max-width: 550px;
width: 90%;
background: white;
margin: 90px auto 0 auto;
padding: 40px;
border-radius: 10px;
box-sizing: border-box;
}
h1 {
font-size: 32px;
margin: 0;
text-align: center;
}
.item label {
display: block;
margin: 20px 0;
}
.item input, textarea {
width: 100%;
padding: 10px;
box-sizing: border-box;
outline: none;
resize: none;
border: none;
border-bottom: 1px solid #d3d3d3;
}
input[type="text"]:focus, textarea:focus {
border-bottom: 1px solid #5a8cdb;
}
textarea::-webkit-scrollbar {
width: 3px;
}
textarea::-webkit-scrollbar-thumb {
background-color: #5a8cdb;
}
.center {
text-align: center;
}
input[type="submit"] {
margin-top: 30px;
width: 90%;
max-width: 200px;
border-radius: 5px;
background: #5a8cdb;
color: white;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background: #3F73C5;
}
.error {
display: block;
margin: 5px 0;
color: red;
}
.error-border {
border-bottom: 1px solid red;
}
#success {
color: green;
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulaire de Contact</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form onsubmit="event.preventDefault(); validateForm()">
<h1>Contactez-nous</h1><br>
<div class="item">
<label for="nom">Nom</label>
<input type="text" id="nom" placeholder="Votre nom">
<small class="error"></small>
<label for="prenom">Prénom</label>
<input type="text" id="prenom" placeholder="Votre prénom">
<small class="error"></small>
<div class="center">
<input type="submit" value="Envoyez">
<p id="success"></p>
</div>
</form>
<script src="script.js"></script>
</body>
</html>………………………………………………………………..
……………………………………………………………….
>Solution :
When you call the validateForm(), clear them before it does anything else
function validateForm(){
errorNodes[0].innerText = "";
errorNodes[1].innerText = "";
Then the rest of your code and add this
if(!errorFlag){
errorNodes[0].innerText = "";
errorNodes[1].innerText = "";
success.innerText = "Message envoyé!";
}
Easiest way