I want my form to save the correct info on jQuery, HTML

August 23, 2022

How to keep my existing info when some are missing, the site goes up and everything is erased when info is missing.

I would like the page to remain at the bottom, even if there are errors, and if there is good information that the form retains them

HTML :

<footer style="background-color: black;color: white">
    <form>
        <h3>Nous-Joindre</h3>

        <div class="formContainer">

            <label for="prenom">Prenom</label>
            <input type="text" id="prenom" name="prenom" placeholder="Votre Prenom">

            <label for="nom">Nom de Famille</label>
            <input type="text" id="nom" name="nom" placeholder="Votre nom de Famille">

            <label for="email">Courriel :</label>
            <input type="text" name="email" id="email" placeholder="Courriel@example.com"><br>

            <label for="sujet">Sujet</label>
            <input type="text" name="sujet" id="sujet" placeholder="Sujet"></textarea>

            <label for="subject">Message</label>
            <textarea id="message" name="message" placeholder="Écrire votre Message ici.."
                style="height:200px"></textarea>

            <input id = "submit" type="submit" value="Envoyer">
        </div>
    </form>

</footer>

jQuery – e-mail confirmation:

$('#submit').click(function () {
let re = /^\w+([-+.'][^\s]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if ($('#email').val() == '') {
    $('#email').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
}
else if (!re.test($('#email').val())) {
    $('#email').css('border', '2px solid red');
    alert('Courriel Invalide')
}

First name confirmation :

else if ($('#prenom').val() == '') {
    $('#nom').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
}

Name confirmation :

else if ($('#nom').val() == '') {
    $('#nom').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
}

Subject confirmation :

else if ($('#subject').val() == '') {
    $('#subject').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
}

Message confirmation :

    else if ($('#message').val() == '') {
    $('#message').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
    }

If everything is ok, border should go green:

    else {
    $('#email').css('border', '2px solid green')
    $('#prenom').css('border', '2px solid green')
    $('#nom').css('border', '2px solid green')
    $('#subject').css('border', '2px solid green');
    $('#message').css('border', '2px solid green');
}
})

CSS:

.formContainer {
    border-radius: 5px;
    background-color: #456542a4, whitesmoke;
    padding: 20px;
}

>Solution :

You need to use preventDefault()

$('#submit').click(function (e) {
  e.preventDefault();

  let re = /^\w+([-+.'][^\s]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  if ($('#email').val() == '') {
    $('#email').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
  } else if (!re.test($('#email').val())) {
    $('#email').css('border', '2px solid red');
    alert('Courriel Invalide')
  } else if ($('#prenom').val() == '') {
    $('#nom').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
  } else if ($('#nom').val() == '') {
    $('#nom').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
  } else if ($('#subject').val() == '') {
    $('#subject').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
  } else if ($('#message').val() == '') {
    $('#message').css('border', '2px solid red');
    alert('Veuillez remplir tout les champs')
  } else {
    $('#email').css('border', '2px solid green')
    $('#prenom').css('border', '2px solid green')
    $('#nom').css('border', '2px solid green')
    $('#subject').css('border', '2px solid green');
    $('#message').css('border', '2px solid green');
  }
})

.formContainer {
border-radius: 5px;
background-color: #456542a4, whitesmoke;
padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
        <h3>Nous-Joindre</h3>

        <div class="formContainer">

            <label for="prenom">Prenom</label>
            <input type="text" id="prenom" name="prenom" placeholder="Votre Prenom">

            <label for="nom">Nom de Famille</label>
            <input type="text" id="nom" name="nom" placeholder="Votre nom de Famille">

            <label for="email">Courriel :</label>
            <input type="text" name="email" id="email" placeholder="Courriel@example.com"><br>

            <label for="sujet">Sujet</label>
            <input type="text" name="sujet" id="sujet" placeholder="Sujet"></textarea>

            <label for="subject">Message</label>
            <textarea id="message" name="message" placeholder="Écrire votre Message ici.."
                style="height:200px"></textarea>

            <input id = "submit" type="submit" value="Envoyer">
        </div>
    </form>