javascript - 添加后“请填写此字段”

Question

添加任务后，出现“请填写此字段”消息。我使用函数 setCustomValidity() 和默认验证表单。

const form = document.querySelector(".form");
const text = document.querySelector(".text");
const button = document.querySelector(".button");
const list = document.querySelector(".list");

const add = function() {
  let valueText = text.value;
  
  if (valueText === "") {
    text.setCustomValidity("Error");
    return false;
  } else {
    text.setCustomValidity("");
  }
  
  const elementItem = document.createElement("li");
  elementItem.setAttribute("class", "item");
  list.appendChild(elementItem);
  elementItem.textContent = valueText;
  
  text.value = "";
}

button.addEventListener("click", add.bind(this));

<form action="#" class="form">
  <input type="text" class="text" required>
  <button class="button" type="submit">Add</button>
</form>
<ul class="list"></ul>

标签： javascripthtml

Answer 1

删除required应用于input字段的属性，因为您已经在js代码中管理它。

<input type="text" class="text" required>应该是<input type="text" class="text">。