Adding a required field to a text input through JS?

January 10, 2024

I am making a ‘TO DO’ list which takes a task that has been inputted by the user and displays it in a list.

I am trying to set the input for the task to be ‘required’ so that the user can’t submit an ‘Empty’ task.

HTML:

<div>
    <input type="text" id="task" placeholder="What do you need to do?" />
    <button class="btn" onclick="createToDo()">Submit</button>
    <button class="btn" onclick="window.location.reload()">
        Clear List
    </button>
</div>

JS:

function createToDo() {
    var input = document.getElementById("task").value;
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    var remove = document.createElement("button");
  
    remove.classList.add("remove");
    remove.innerHTML = "Complete";
    remove.addEventListener("click", ({ target }) =>
        target.parentElement.remove()
    );
  
    li.appendChild(document.createTextNode(input));
    ul.appendChild(li);
    li.appendChild(remove);
}

I have tried to add it directly to the HTML but it doesn’t work:

<input type="text" id="task" placeholder="What do you need to do?" required/>

I have also tried to inject it through JS, but this doesn’t seem to work either:

const taskInput = document.getElementById("task");
taskInput.setAttribute("required");

I understand that when I click the submit it runs the function to create the list, so I’m not sure if there is something that I have to change within the function.

Any help is greatly appreciated.

>Solution :

If you wished to use the standard Client-side form validation, you need to use a <form> element and rely on its submit event instead of binding the handler to the click event of a <button type="button">.

Here in this demo I used the required attribute for <input> and called the createToDo when the submit event triggers on the parent form.

For the sake of records, a button is by default type="submit" .. here I just stressed out explictely

function createToDo() {
  var input = document.getElementById("task").value;
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  var remove = document.createElement("button");

  remove.classList.add("remove");
  remove.innerHTML = "Complete";
  remove.addEventListener("click", (event) => {
    event.target.parentElement.remove()
  });

  li.appendChild(document.createTextNode(input));
  ul.appendChild(li);
  li.appendChild(remove);
}

<form onsubmit="event.preventDefault();createToDo();">
  <div>
    <input type="text" id="task" placeholder="What do you need to do?" required />
    <button type="submit" class="btn">Submit</button>
    <button class="btn" onclick="window.location.reload()">Clear List</button>
  </div>
</form>

<ul id="list">
</ul>