我正在做一個聯系表格，當我在資訊不正確時使用錯誤訊息時，它可以作業，但一旦更正，我就無法洗掉這些訊息。
請問我的代碼有什么問題/遺漏？
這是我的代碼：
// 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>..................................................... ……………………………………………………………………………………………………………………………………………… ..................................................
uj5u.com熱心網友回復：
好吧，您必須在以某種方式編輯輸入后呼叫“clearMessages()”。或在編輯期間。
將此添加到 js 檔案中：
nom.addEventListener('change', clearMessages);
prenom.addEventListener('change', clearMessages);
nom.addEventListener('focus', clearMessages);
prenom.addEventListener('focus', clearMessages);
編輯：將明文中的代碼更改為：
errorFlag = false;
for (let i = 0; i < errorNodes.length; i ){
errorNodes[i].innerText = "";
}
success.innerText = "";
并編輯：
let errorFlag = false;
clearMessages ();
uj5u.com熱心網友回復：
當 validateForm 方法中的一切都正確時，您沒有必要的代碼。因此，要么添加宣告，如果一切正常，將洗掉錯誤訊息，innerHTML = ''或者不呼叫 formSubmit 上的驗證，您可以：
nom.addEventListener('keyup', (e) => {
if(e.target.value < 1)
//show error code
else //remove error
})
這可以添加到您要驗證的每個輸入中。
uj5u.com熱心網友回復：
當您呼叫 validateForm() 時，請在執行其他任何操作之前清除它們
function validateForm(){
errorNodes[0].innerText = "";
errorNodes[1].innerText = "";
然后你的代碼的其余部分并添加這個
if(!errorFlag){
errorNodes[0].innerText = "";
errorNodes[1].innerText = "";
success.innerText = "Message envoyé!";
}
最簡單的方法
uj5u.com熱心網友回復：
這是因為在檢查表單驗證后代碼沒有呼叫“clearMessages()”。將 'clearMessages()' 移動到 'if(!errorFlag)' 條件塊中，這樣一旦表單提交且沒有錯誤，該函式將呼叫 'clearMessages()'。
if(!errorFlag){
success.innerText = "Message envoyé!";
clearMessages ();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/425025.html
標籤：javascript html css
下一篇：網格項不隨內部內容高度擴展