User can create a task with the white space/blank title - todoApp

[code-liana]

Describe the Issue

STEPS TO REPRODUCE:

1. Start todo App
2. Click on "Add New Task" button
3. On the "Title" field click on the "Space" key (long key on your keyboard) to create a blank space
4. Click on "Add Task"

ACTUAL RESULT:
The user created empty task even though title field is required

Affected Page

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-localstorage-by-building-a-todo-app/step-65

Your code

taskForm.addEventListener('submit', (e) => {
    e.preventDefault();
    addOrUpdateTask();
});

Expected behavior

User should not be able to create an empty title, as it goes against what we set on HTML.

<input required type="text" class="form-control" id="title-input" value="" />

---

as discussed with @jdwilkin4 under the issue #54524

---

Ex. of expected behavior 1:

const isTitleEmpty = (val) => !val.trim().length


taskForm.addEventListener("submit", (e) => {
  e.preventDefault();

  if(isTitleEmpty(titleInput.value)){
    alert("Please provide a title")
    return
  }
  
  addOrUpdateTask();
});

Ex. of expected behavior 2:
JS

const errorMessage = document.getElementById("errorMessage");
const isEmpty = (str) => !str || !str.trim();

taskForm.addEventListener('submit', (e) => {
    e.preventDefault();
    if (!isEmpty(titleInput.value)) {
        addOrUpdateTask();
    } else {
        // Create an error message element
        errorMessage.textContent = "Error: title cannot be an empty value!";
        errorMessage.style.display = "block";

        // Remove the error message after 3 seconds
        setTimeout(() => {
            errorMessage.style.display = "none";
        }, 3000);
    }
});

HTML

<div class="task-form-body">
          <label class="task-form-label" for="title-input">Title</label>
          <input required type="text" class="form-control" id="title-input" value="" />
          <label id="errorMessage" style="display: none; color: red; font-weight: bold;"></label>
          <label class="task-form-label" for="date-input">Date</label>
          <input type="date" class="form-control" id="date-input" value="" />
          <label class="task-form-label" for="description-input">Description</label>
          <textarea class="form-control" id="description-input" cols="30" rows="5"></textarea>
</div>

Screenshots

System

Device: Laptop
OS: Windows 11 Home
Browser: Chrome
Version: 124.0.6367.61

Additional context

No response

[Bhanubediya]

Hi Is this issue open ?

[jdwilkin4]

@Bhanubediya

Issues marked with help-wanted or first-timers-only are open for contribution.
You can read the contributing guidelines here
https://contribute.freecodecamp.org/#/index

[jdwilkin4]

Personally I like the idea of showing an alert.
But we will wait to hear from the other team members on their thoughts.

If we do go with ex 2., then we shouldn't use inline styles like in the example. The styles should be inside the stylesheet instead. And setTimeout will need to be taught because this is the first time it has shown up.

[a2937]

Form validation usually shows up in an error message but I'm not that opposed to an alert.

Plus we have a great opportunity to teach a new method.

[code-liana]

Timeout is introduced to the campers in the next project "Decimal to binary converter".

I think it would be good to go with the alert option.