我希望我的表单在jQuery、HTML上保存正确的信息

Question

如何在一些信息丢失时保留我现有的信息，当信息丢失时，网站会打开，所有信息都会被删除。

我希望页面保持在底部，即使有错误，如果有好的信息表明表单保留了

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="[e-mail]"><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-电子邮件确认：

$('#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')
}

名字确认：

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');
}
})

CSS：

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

Answer 1

您只需要在触发提交按钮后添加preventDefault((。在提交触发选项中使用此代码：

$("#submit").on("click",function(event){
event.preventDefault();
});

Answer 2

您需要使用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="[e-mail]"><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>