如何在 select 和选项 html 标签上添加和删除自定义错误注释 class？

Question

我想在 select 下拉菜单中显示一条错误消息，当用户什么都不选择并点击提交时，应该会出现错误消息。
在我的代码中，我添加了两个事件监听器。 submit 和 change。
当用户在没有选择任何选项的情况下点击提交时，会出现该消息，但是当用户选择任何国家并点击输入时，错误消息仍然会出现。为什么会发生这种情况，解决方案是什么？

const form = document.getElementById("form");
const select = document.getElementById("select-country");
const selectCountry = document.getElementById("select-country").selectedIndex;
const option = document.getElementsByTagName("option")[selectCountry];
const error = document.getElementById("error").style.display = "none";

// console.log(option.value);

form.addEventListener("submit", (e) => {
  e.preventDefault();
  if (option.value === "" || option.value === null) {
    document.getElementById("error").style.display = "block";
    select.classList.add("border-red-500");
    select.classList.add("ring-1");
    select.classList.add("ring-red-500");
    select.classList.add("border");
  }
});

select.addEventListener('change', () => {
  if (option.value === "" || option.value === null) {
    document.getElementById("error").style.display = "block";
    select.classList.add("border-red-500");
    select.classList.add("ring-1");
    select.classList.add("ring-red-500");
    select.classList.add("border");
  }
})

<form action="#" class="my-8" id="form">
      <label for="email">Email Address</label>
      <input type="email" placeholder="rendel@renmail.com" class="w-full my-2" id="email" />
      <label for="select-country" class="block my-2">Country</label>
      <select name="select-country" id="select-country" class="w-full my-2">
        <option value="" class="option" selected>Select Country</option>
        <option value="norway" class="option">Norway</option>
        <option value="ireland" class="option">Ireland</option>
      </select>
      <p class="text-xs px-2 border shadow text-red-500 w-full font-semibold" id="error">This field is required!</p>
      <label for="userinput" class="block my-2">Password</label>
      <input type="password" placeholder="Enter password" class="w-full my-2" id="userinput" required />
      <button type="submit" class="py-3 px-12 bg-pink-500 rounded-md text-white font-semibold mt-6">Register</button>
    </form>

Answer 1

您需要添加 else 语句来隐藏用户选择值时的错误。

要访问所选值，您只需要像下面那样select.value：

const selectCountry = document.getElementById("select-country");

console.log(selectCountry.value);

一个工作示例。如果它不能解决您的问题，请告诉我。

const form = document.getElementById("form");
const select = document.getElementById("select-country");
const selectCountry = document.getElementById("select-country");
const option = document.getElementsByTagName("option")[selectCountry];
const error = document.getElementById("error").style.display = "none";

// console.log(option.value);

form.addEventListener("submit", (e) => {
  e.preventDefault();
  
  if (!selectCountry.value) {
    document.getElementById("error").style.display = "block";
    select.classList.add("border-red-500");
    select.classList.add("ring-1");
    select.classList.add("ring-red-500");
    select.classList.add("border");
  } else {
    document.getElementById("error").style.display = "none"
  }
});

select.addEventListener('change', () => {
  if (!selectCountry.value) {
    document.getElementById("error").style.display = "block";
    select.classList.add("border-red-500");
    select.classList.add("ring-1");
    select.classList.add("ring-red-500");
    select.classList.add("border");
  } else {
    document.getElementById("error").style.display = "none"
  }
})

<form action="#" class="my-8" id="form">
      <label for="email">Email Address</label>
      <input type="email" placeholder="rendel@renmail.com" class="w-full my-2" id="email" />
      <label for="select-country" class="block my-2">Country</label>
      <select name="select-country" id="select-country" class="w-full my-2">
        <option value="" class="option" selected>Select Country</option>
        <option value="norway" class="option">Norway</option>
        <option value="ireland" class="option">Ireland</option>
      </select>
      <p class="text-xs px-2 border shadow text-red-500 w-full font-semibold" id="error">This field is required!</p>
      <label for="userinput" class="block my-2">Password</label>
      <input type="password" placeholder="Enter password" class="w-full my-2" id="userinput" required />
      <button type="submit" class="py-3 px-12 bg-pink-500 rounded-md text-white font-semibold mt-6">Register</button>
    </form>

如何在 select 和选项 html 标签上添加和删除自定义错误注释 class？

How can I add and remove custom error note class on select and option html tags?

html

javascript

html-select