Javascript: Form Validation remove error messages-CodePudding

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 >
        <label for="nom">Nom</label>
        <input type="text" id="nom" placeholder="Votre nom">
        <small ></small>       

        <label for="prenom">Prénom</label>
        <input type="text" id="prenom" placeholder="Votre prénom">
        <small ></small>

        <div >
            <input type="submit" value="Envoyez">
            <p id="success"></p>

    </div>

    </form>

    <script src="script.js"></script>

</body>
</html>

.......................................................................... .........................................................................

CodePudding user response：

well you have to call 'clearMessages()' after editing input somehow. or during editing.

add this to js file:

  nom.addEventListener('change', clearMessages);
  prenom.addEventListener('change', clearMessages);

  nom.addEventListener('focus', clearMessages);
  prenom.addEventListener('focus', clearMessages);

EDIT : change code in clear message to :

errorFlag = false;
for (let i = 0; i < errorNodes.length; i  ){
    errorNodes[i].innerText = "";
}
success.innerText = "";

and also edit this :

let errorFlag = false;
clearMessages ();

CodePudding user response：

You don't have necessary code when everything is correct within validateForm method. So either add statement that if everything is okay, will remove the the error messages with innerHTML = '' or instead of calling the validation on formSubmit you can:

nom.addEventListener('keyup', (e) => { 
if(e.target.value < 1) 
//show error code 
else //remove error  
})

This can be added to every input you want to validate.

CodePudding user response：

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

CodePudding user response：

It is because the code didn't call the 'clearMessages()' after checking the form is validated. Move the 'clearMessages()' insdie the 'if(!errorFlag)' condition block so the function will call 'clearMessages()' once the form is submit with no error.

if(!errorFlag){
        success.innerText = "Message envoyé!";
        clearMessages ();
}