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

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 >

            <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="[email protected]"><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;
}

CodePudding user response：

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 >

            <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="[email protected]"><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>