JavaScript，無法洗掉css類-有解無憂

我在 js 中對 html 表單進行了驗證，它包含兩個操作第一個是在單擊“發送”按鈕后檢查輸入中的資料并顯示表單下方陣列中的錯誤 - 這里一切正常。

驗證的第二部分是在資料輸入期間檢查欄位。當資料與鍵（正則運算式）或條件不匹配時，會出現紅色輪廓圓形欄位。

在這里，我遇到了一個問題，它僅適用于我的五個欄位中的三個，名稱（Imie i Naziwsko），電子郵件（Adres mailowy）和電話（Telefon）。

對于標題（Tytul）和訊息（wiadomosc），當資料錯誤時它會顯示紅色輪廓，但當資料正確時它不會被洗掉。

我在控制臺沒有任何錯誤。

提琴手

const formChecker = () => {
  //get elements
  const contactForm = document.getElementById("form-contact");
  const inputName = document.getElementById("name");
  const inputEmail = document.getElementById("mailadress");
  const inputTitle = document.getElementById("title");
  const inputMessage = document.getElementById("message");
  const inputPhone = document.getElementById("phone-number");
  const divError = document.querySelector(".error-message");

  //regex patterns
  const regexPatternMail =
    /^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff] |\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff] |\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff] |\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff] |\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,}) $/;

  const regexPattern =
    /^([A-Z???????ó?][a-z???ńó????{3,}] )(\s|-|_) ([A-Z???????ó?][a-z???ńó????{3,}] )$/;
  const regexPhonePattern =
    /^[ ]?\d{1,3}\s?(-)?[0-9]{3}(\s)?[0-9]{3,4}(\s)?[0-9]{3}(\s)?$/;

  const regexTitltePattern = / (\w{3,30}) /;

  //remove html validation
  contactForm.setAttribute("novalidate", true);

  //test functions
  function testText(field) {
    return regexPattern.test(field.value);
  }

  function testMail(field) {
    return regexPatternMail.test(field.value);
  }

  function testPhone(field) {
    return regexPhonePattern.test(field.value);
  }

  function testTitle(field, lng) {
    return regexTitltePattern.test(field.value);
  }

  function testMessage(field, lng) {
    return field.value.length < lng;
  }

  //add and remove red stroke
  function markFieldAsError(field, show) {
    if (show) {
      field.classList.add("invalid");
    } else {
      field.classList.remove("invalid");
    }
  }

  //add listener
  inputName.addEventListener("input", (e) =>
    markFieldAsError(e.target, !testText(e.target))
  );
  inputEmail.addEventListener("input", (e) =>
    markFieldAsError(e.target, !testMail(e.target))
  );
  inputPhone.addEventListener("input", (e) =>
    markFieldAsError(e.target, !testPhone(e.target))
  );
  inputTitle.addEventListener("input", (e) =>
    markFieldAsError(e.target, !testTitle(e.target))
  );
  inputMessage.addEventListener("input", (e) =>
    markFieldAsError(e.target, !testMessage(e.target))
  );

  //send
  contactForm.addEventListener("submit", (el) => {
    el.preventDefault();
    let formErrors = [];

    //hide error - red stroke
    for (const el of [
      inputName,
      inputEmail,
      inputPhone,
      inputTitle,
      inputMessage,
    ]) {
      el.markFieldAsError(el, false);
    }

    if (!testText(inputName)) {
      formErrors.push("Prosz? poprawnie wyp?eni?  pole Imi? i Nazwisko ");
      markFieldAsError(inputName, true);
    }

    if (!testMail(inputEmail)) {
      formErrors.push("Prosz? poprawnie wype?ni? pole z adresem email");
      markFieldAsError(inputEmail, true);
    }

    if (!testPhone(inputPhone)) {
      markFieldAsError(inputPhone, true);
    }

    if (!testTitle(inputTitle)) {
      formErrors.push("Pole wiadomo?? musi zawiera? minimum 3 znaki");
      markFieldAsError(inputTitle, true);
    }

    if ((!testMessage(inputMessage), 10)) {
      formErrors.push("Pole wiadomo?? musi zawiera? minimum 10 znaków");
      markFieldAsError(inputMessage, true);
    }

    if (!formErrors.length) {
      //if no errors send form
      el.target.submit();
    } else {
      //if there are some errors

      divError.innerHTML = `<h3 >Przed wys?aniem prosz? poprawi? b??dy:</h3>
                    <ul >
                        ${formErrors.map((el) => `<li>${el}</li>`).join("")} 
                    </ul>`;
    }
  });
};

formChecker();

body {
  background-color:#412f28;
  display:flex;
  align-items:center;
  flex-direction:column;
}
#form p {
  font-size: 1rem;
  color:white!important;
}
#form .star {
  font-size: 1rem;
  vertical-align: super;
  color:#E3A324!important;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], input[type=mail],
select, textarea {
  width: 100%; /* Full width */
  padding: 24px; /* Some padding */ 
  border: 1px solid #35251f; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/*
.invalid {
border: 4px solid red;
outline: 4px;
box-shadow: 0 0 2px red;
}
*/
.invalid {
  border:0px!important ;
  transition: border .3s linear;
  outline: dashed 1px red!important;
  outline-width:1px;
  outline-offset: 4px;
  transition: border, outline .3 ease-out;
}
/* Style the submit button with a specific background color etc */
input[type=submit], .custom-file-upload  {
  background-color:#E3A324;
  color: white;
  font-weight: 700;
  padding: 12px 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
  transition: background-color 1s linear;
}
input[type="text"], input[type="mail"], textarea {
  border:2px solid #cc9933;
  outline:0;
  transition: border .3s linear;
  outline: 0px;
}
input[type="text"]:hover , input[type="mail"]:hover  {
  border: 2px solid #ffaa00;
}
input[type="file"] {
  display:none;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #ffaa00;
}
label {
  color:white;
}
/* Add a background color and some padding around the form */
.container-form {
  width:60vw;
  display:flex;
  justify-content: center;
  align-items: center;
}
input {
  transition: outline-color .7s linear;
}
input:focus, textarea:focus, select:focus{
  outline-color: #E3A324;
}
.error-message  {
  font-size: .5rem;
  line-height:20px;
  padding-left:1vw;
  margin-top:-1vh;
  color:#E3A324;
  font-weight: 400;
  letter-spacing: 1px;
}

<body>
   <h2>Napisz do nas:</h2>
   <p><span class="star">*</span>pola oznaczone gwiazdk? s? wymagane aby wys?a? wiadomo??</p>
   <div class="container-form">
      <form  id ="form-contact" action="action_page.php">
         <label for="fname">Imi? i Nazwisko <span class="star">*</span></label>
         <input type="text" id="name" name="name" placeholder="Podaj imi? i nazwisko..." required>
         <label for="mailadress">Adres mailowy<span class="star">*</span></label>
         <input type="mail" id="mailadress" name="mail" placeholder="podaj swojego maila..." required>
         <label for="mailadress">Telefon</label>
         <input type="text" id="phone-number" name="phone" placeholder="podaj nr telefonu...">
         <label for="title">Tytu? wiadomo?ci<span class="star">*</span></label>
         <input type="text" id="title" name="message-title" placeholder="podaj tytu?..." required>
         <label for="subject">Tre?? wiadomo?ci:<span class="star">*</span></label>
         <textarea id="message" name="mess-content" placeholder="napisz..." style="height:300px" required></textarea>
         <br>
         <div class="error-message "></div>
         <input type="submit" id="send" value="Wy?lij">
         <label class="custom-file-upload">
            <input type="file">
            <p>Dodaj plik</p>
         </label>
      </form>
   </div>
</body>

uj5u.com熱心網友回復：

regexTitltePattern 有什么意義？在 testMessage 中，您將長度與未定義的 lng 進行比較，您沒有將任何值傳遞給它。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/422551.html

標籤：

上一篇：身份驗證后請求路由時拒絕訪問-AWSCloudfront和AWSS3

下一篇：如何檢查字串c#中重復出現的字符