提交表单时如何要求文本框不为空？答案

【问题标题】：How to require the textbox to not be empty when submitting a form?提交表单时如何要求文本框不为空？
【发布时间】：2021-05-17 01:44:24
【问题描述】：

那么，如何在点击提交按钮时要求表单中的输入字段不能为空？我不想使用 HTML 属性要求。我的 HTML 和 JS 代码如下，如果有人有兴趣看看

JS：

let form = document.getElementById("addForm");

// Form submit event
form.addEventListener("submit", addItem);

// Add item
function addItem(e){

e.preventDefault();
console.log(e);

// Get input value





let newItem = document.getElementById("item").value;

// Create new li
let newLI = document.createElement("li");
// Add class

newLI.className = "list-group-item";
// Add text node with input

newLI.textContent = newItem;

//Delete button

let button = document.createElement("button");
button.className = "btn btn-danger btn-sm float-right delete";
button.textContent = "X";
newLI.appendChild(button);

itemList.appendChild(newLI);
document.getElementById("item").value = "";



}

HTML：

    <form id="addForm" class="form-inline mb-3">
      <input type="text" class="form-control mr-2" id="item">
      <input type="submit" class="btn btn-dark" value="Submit">
    </form>

【问题讨论】：

标签： javascript html validation dom input

【解决方案1】：

在您的代码中，您可以在阻止提交之前检查 newItem 是否为空。像这样：

let newItem = document.getElementById("item").value;

if(newItem === "")
{
e.preventDefault();
}

【讨论】：

这不行，它搞砸了整个事情。
我把它贴在@Raffon
你需要在函数之前注册事件，如下所示：form.addEventListener("submit", addItem);
是的，我已经做到了，但我没有在帖子中包含它
但是你到底想做什么，因为在这段代码中，如果输入为空，它将执行其余的代码，否则它只会提交？

【解决方案2】：

你必须像这样改变你的 HTML：

<form id="addForm" class="form-inline mb-3">
  <input type="text" class="form-control mr-2" id="item" required>
  <input type="submit" class="btn btn-dark" value="Submit">
</form>

【讨论】：

但是，当我使用所需的 HTML 属性时，文本框总是红色的。
如果这是您的问题，您可以使用本教程更改所需元素的 css stackoverflow.com/questions/39808218/…

【解决方案3】：

function addItem(e){



//e.preventDefault();
console.log(e);

// Get input value





let newItem = document.getElementById("item").value;

if (newItem === ""){
    e.preventDefault()
}

else {
// Create new li
let newLI = document.createElement("li");
// Add class

newLI.className = "list-group-item";
// Add text node with input

newLI.textContent = newItem;

//Delete button

let button = document.createElement("button");
button.className = "btn btn-danger btn-sm float-right delete";
button.textContent = "X";
newLI.appendChild(button);

itemList.appendChild(newLI);
document.getElementById("item").value = "";
}



}

【讨论】：

你去@Raffon

【解决方案4】：

您需要在 JavaScript 中选择表单输入字段 -

const formInput = document.querySelector('#item');

然后在 addItem 函数中，您可以检查如下内容 -

if (formInput.value === '') {
  console.log('No Input Entered!');
}

【讨论】：