如何通过JS为文本输入框添加必填字段？待办清单开发问题

你添加的required属性未生效，核心原因是：浏览器的原生表单验证仅在表单提交（submit）场景下触发，而当前你通过普通按钮的onclick直接调用自定义函数，不会触发这一验证逻辑。以下是两种可行的解决方案：

方案一：使用

包裹元素，利用原生表单提交验证 #

将输入框和提交按钮放入<form>标签内，改用type="submit"的按钮，这样点击按钮时浏览器会自动检查required属性，验证通过后再执行你的待办事项创建逻辑。

修改后的HTML代码：

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

修改后的JS代码：

document.getElementById('todoForm').addEventListener('submit', function(e) {
    // 阻止表单默认的页面跳转行为
    e.preventDefault();
    
    const input = document.getElementById("task").value;
    const ul = document.getElementById("list");
    const li = document.createElement("li");
    const removeBtn = document.createElement("button");
  
    removeBtn.classList.add("remove");
    removeBtn.innerHTML = "Complete";
    removeBtn.addEventListener("click", ({ target }) => target.parentElement.remove());
  
    li.appendChild(document.createTextNode(input));
    ul.appendChild(li);
    li.appendChild(removeBtn);
    
    // 清空输入框，方便下一次输入
    document.getElementById("task").value = '';
});

方案二：在自定义函数中手动触发验证 #

如果不想调整HTML结构，可以在createToDo函数里主动检查输入有效性，既可以调用原生验证方法，也可以手动判断输入内容。

修改后的JS函数：

function createToDo() {
    const taskInput = document.getElementById("task");
    const input = taskInput.value.trim(); // 去除首尾空格，避免纯空格提交
    
    // 方式1：触发浏览器原生必填提示
    if (!taskInput.checkValidity()) {
        taskInput.reportValidity(); // 弹出系统默认的验证提示
        return;
    }

    // 方式2：自定义提示（可选）
    // if (!input) {
    //     alert("请输入待办事项内容");
    //     taskInput.focus();
    //     return;
    // }
    
    const ul = document.getElementById("list");
    const li = document.createElement("li");
    const removeBtn = document.createElement("button");
  
    removeBtn.classList.add("remove");
    removeBtn.innerHTML = "Complete";
    removeBtn.addEventListener("click", ({ target }) => target.parentElement.remove());
  
    li.appendChild(document.createTextNode(input));
    ul.appendChild(li);
    li.appendChild(removeBtn);
    
    taskInput.value = '';
}

两种方案各有优势：方案一依托浏览器原生能力，无需手动编写提示逻辑；方案二更灵活，适合需要自定义验证提示或保留原有HTML结构的场景。

内容的提问来源于stack exchange，提问作者Kyde