title: How to require the textbox to not be empty when submitting a form?
body: <p>So how do I require the input field in my form not to be empty when clicking on the submit button? I don't want to use the HTML attribute require. My HTML and JS code are below if someone is interested in taking a look</p>
  <p>JS:</p>
  <pre><code>let form = document.getElementById(&quot;addForm&quot;);
  
  // Form submit event
  form.addEventListener(&quot;submit&quot;, addItem);
  
  // Add item
  function addItem(e){
  
  e.preventDefault();
  console.log(e);
  
  // Get input value
  
  
  
  
  
  let newItem = document.getElementById(&quot;item&quot;).value;
  
  // Create new li
  let newLI = document.createElement(&quot;li&quot;);
  // Add class
  
  newLI.className = &quot;list-group-item&quot;;
  // Add text node with input
  
  newLI.textContent = newItem;
  
  //Delete button
  
  let button = document.createElement(&quot;button&quot;);
  button.className = &quot;btn btn-danger btn-sm float-right delete&quot;;
  button.textContent = &quot;X&quot;;
  newLI.appendChild(button);
  
  itemList.appendChild(newLI);
  document.getElementById(&quot;item&quot;).value = &quot;&quot;;
  
  
  
  } 
  </code></pre>
  <p>HTML:</p>
  <pre><code>    &lt;form id=&quot;addForm&quot; class=&quot;form-inline mb-3&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control mr-2&quot; id=&quot;item&quot;&gt;
        &lt;input type=&quot;submit&quot; class=&quot;btn btn-dark&quot; value=&quot;Submit&quot;&gt;
      &lt;/form&gt;
  </code></pre>