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

Question

那么如何在单击提交按钮时要求表单中的输入字段不为空？ 我不想使用 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>

Answer 1

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

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

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

Answer 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>

Answer 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 = "";
}



}

Answer 4

您将需要 select 您在 JavaScript 中的表单输入字段 -

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

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

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