有沒有辦法在驗證錯誤時更改div顏色？

我一直在制作帶有驗證的聯系表格。我正在使用約束驗證 api，并且我有這些檔案可以按我想要的方式作業，但我想知道是否有一種方法可以在出現錯誤時將錯誤框設為紅色，在沒有驗證錯誤時將錯誤框設為白色（或隱藏）。可能有一些代碼是不必要的，當我對功能感到滿意時，我計劃清理它，但現在看起來當一切都有效時我到處都有錯誤。

const form = document.getElementsByTagName('form')[0];
const email = document.getElementById('mail');
const emailError = document.querySelector('#mail   span.error');
const navn = document.getElementById('navn');
const navnError = document.querySelector('#navn   span.error');
const telefon = document.getElementById('telefon');
const telefonError = document.querySelector('#telefon   span.error')
const message = document.getElementById('message');
const messageError = document.querySelector('#message   span.error')
const personvern = document.getElementById('personvern');
const personvernError = document.querySelector('#personvern   span.error')


// THIS DIV WILL CONTAIN ERROR MESSAGES
const errOutput = document.querySelector('.errorsOutput')


email.addEventListener('input', function(event) {
  if (email.validity.valid) {
    emailError.innerHTML = '';
    emailError.className = 'error';
  } else {
    showError();
  }

});


navn.addEventListener('input', function(event) {

  if (navn.validity.valid) {
    navnError.innerHTML = '';
    navnError.className = 'error';

  } else {
    showError();
  }

})

telefon.addEventListener('input', function(event) {

  if (telefon.validity.valid) {
    telefonError.innerHTML = '';
    telefonError.className = 'error';

  } else {
    showError();
  }

})


message.addEventListener('input', function(event) {

  if (message.validity.valid) {
    messageError.innerHTML = '';
    messageError.className = 'error';

  } else {
    showError();
  }

})

form.addEventListener('submit', function(event) {

  if (!email.validity.valid || !navn.validity.valid || !telefon.validity.valid || !message.validity.valid) {
    showError();
    event.preventDefault();
  }

});



function showError() {

  // EMPTY ERRORS DIV
  errOutput.innerHTML = ''


  if (navn.validity.valueMissing) {
    navnError.textContent = '* Du m? fylle inn navnet ditt';
  } else if (navn.validity.tooShort) {
    navnError.textContect = '* Du m? fylle inn hele navnet ditt'
  }
  // OUTPUT ERRORS IN DIV

  if (navnError.textContent != '') {
    errOutput.innerHTML  = '<p>Navn error!</p>'
  }

  if (email.validity.valueMissing) {

    emailError.textContent = '* Vennligst fyll inn e-posten din';
  } else if (email.validity.typeMismatch) {

    emailError.textContent = '* Dette er ikke en gyldig e-postadresse.';
  } else if (email.validity.tooShort) {

    emailError.textContent = `* Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
  }
  // OUTPUT ERRORS IN DIV
  if (emailError.textContent != '') {
    errOutput.innerHTML  = '<p>Email error!</p>'
  }



  if (telefon.validity.valueMissing) {
    telefonError.textContent = '* Du m? fylle inn telefonnummeret ditt'
  } else if (telefon.validity.tooShort) {
    telefonError.textContent = '* Du mangler ett eller flere tall. Vennligst dobbeltsjekk.'
  }
  // OUTPUT ERRORS IN DIV
  if (telefonError.textContent != '') {
    errOutput.innerHTML  = '<p>Telefonnummer error!</p>'
  }

  if (message.validity.valueMissing) {
    messageError.textContent = '* Beskjeden mangler, vennligst fyll inn'
  } else if (message.validity.tooShort) {
    messageError.textContent = `* Beskjed m? v?re minst ${ message.minLength } tegn.`;
  }
  // OUTPUT ERRORS IN DIV
  if (messageError.textContent != '') {
    errOutput.innerHTML  = '<p>Beskjed error!</p>'
  }
}


// Set the styling appropriately
emailError.className = 'error active';
navnError.className = 'error active';
telefonError.className = 'error active';
messageError.className = 'error active';
personvernError.className = 'error active';

body {
  width: 600px;
  padding: 0;
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
}

p * {
  display: block;
}

input[type=text] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 500px;
  width: 100% !important;
  padding: 15px;
  border: 1px solid #333;
  margin: 0;
  font-family: inherit;
  font-size: 90%;
  box-sizing: border-box;
}

input[type=email] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 500px;
  width: 100% !important;
  padding: 15px;
  border: 1px solid #333;
  margin: 0;
  font-family: inherit;
  font-size: 90%;
  box-sizing: border-box;
}

input[type=tel] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 500px;
  width: 100% !important;
  padding: 15px;
  border: 1px solid #333;
  margin: 0;
  font-family: inherit;
  font-size: 90%;
  box-sizing: border-box;
}


/* This is our style for the invalid fields */

input:invalid {
  border-color: #900;
  background-color: #FDD;
}

input:focus:invalid {
  outline: none;
}


/* This is the style of our error messages */

.error {
  width: 100%;
  padding: 15px;
  min-height: 20px;
  font-size: 100%;
  color: white;
  background-color: #900;
  display: flex;
  justify-content: flex-start;
  margin: 1rem 0;
}

.error.active {
  padding: 0;
}

.errorsOutput {
  background-color: #ac0606;
  color: white;
  margin: 0 0 5px 0;
}

.errorsOutput p {
  padding: 1px;
}

<!DOCTYPE html>
<html>

<head>
  <script src="jquery-3.6.0.min.js"></script>
  <script src="kontaktskjema.js"></script>
  <link rel="stylesheet" href="kontakt.css">
  <meta charset="utf-8">
  <title>Kontaktskjema</title>
</head>

<body>

  <!-- THIS DIV WILL CONTAIN ERROR MESSAGES -->
  <div class="errorsOutput">
  </div>

  <div class="kontaktskjema">
    <div class="error">
      <form novalidate>
        <p>
          <label for="navn">
          <span>Navn:</span>
        <input type="text" id="navn" name="navn" required minlength="3">
        <span class="error" aria-live="polite"></span>
      </label>
        </p>
    </div>
    <div class="error">
      <form novalidate>
        <p>
          <label for="name">
            <span>Telefonnummer:</span>
            <input type="tel" id="telefon" name="telefon" required minlength="8" required maxlength="8">
            <span class="error" aria-live="polite"></span>
          </label>
        </p>
    </div>
    <div class="error">
      <form novalidate>
        <p>
          <label for="mail">
                <span>E-post:</span>
                <input type="email" id="mail" name="mail" required minlength="6">
                <span class="error" aria-live="polite"></span>
              </label>
        </p>
    </div>
    <div class="error">
      <form novalidate>
        <p>
          <label for="message">
                    <span>Beskjed:</span>
                    <input type="text" id="message" name="message" required minlength="10">
                    <span class="error" aria-live="polite"></span>
                  </label>
        </p>
    </div>
    <form>
      <p>
        <label for="personvern">
                      <div class="personvern">
                      <span>Personvern:</span>
                      <br>
                      <input type="checkbox" id="personvern" name="personvern" required>
                      <span>Jeg har lest og godkjent <a href="https://demo2108.mobilpluss.no/ac/personvern">Personvernserkl?ringen</a></span>
                      <span class="error" aria-live="polite"></span>
                    </div>
                    </label>
      </p>

      <button>Send</button>
    </form>
  </div>
  <script src="kontakt.js"></script>

</body>

</html>

謝謝！

uj5u.com熱心網友回復：

我這樣做的方式是通過應用程式定義的元素屬性。

CSS 完全支持屬性選擇器。如果您將div元素的某些屬性設定為某個值，例如data-validation-error=true，那么在您的 CSS

div[data-validation-error="true"] {
   /* red */
}

div[data-validation-error="ok"] {
  display: none; /* hidden */
}

在 JavaScript 中，使用setAttribute要控制的 div 上的函式。

注意我使用了data-前綴。這是用戶/應用程式定義的屬性的標準 HTML 屬性前綴。

標籤：javascript html css

上一篇：如何在免費的boostrap模板中更改背景？

下一篇：我在一行中有一個單詞串列滑塊，當我將滑鼠懸停在單詞上時，我想要影片暫時暫停