无法用JavaScript将表单文本框的required属性设为true求助

嘿，我瞅了你的代码，发现俩关键问题，咱一步步给你理顺解决：

1. 先把语法错误改了！ #

你写的method-2那行末尾多了个多余的点，这直接导致JS报错，后面的代码根本跑不起来：

document.getElementById("sample").setAttribute("required","").// 这里的点必须删掉！

修正后可以选两种方式设置required：

// 方式1：直接操作DOM属性（更推荐，简单靠谱）
document.getElementById("sample").required = true;
// 方式2：操作HTML属性，要写对格式
document.getElementById("sample").setAttribute("required", "required");

2. 表单提交的逻辑坑要填上 #

就算你改了语法，直接在onsubmit里设置required，表单还是可能直接提交——因为你没阻止默认提交行为，也没让浏览器重新触发验证。

给你改好的完整代码 #

<html>
<head>
<script>
function validate() {
    const inputBox = document.getElementById("sample");
    // 给输入框加上必填约束
    inputBox.required = true;

    // 手动检查输入框是否符合要求
    if (!inputBox.checkValidity()) {
        // 弹出浏览器自带的必填提示
        inputBox.reportValidity();
        // 阻止表单提交
        return false;
    }

    // 验证通过后的逻辑，比如提示或者其他操作
    alert("ok，验证通过啦");
    // 允许表单提交
    return true;
}
</script>
</head>
<body>
<!-- 注意这里要写return validate()，不然阻止不了提交！ -->
<form method="post" action="" onsubmit="return validate()">
    <input type="text" id="sample">
    <button type="submit">提交</button>
</form>
</body>
</html>

划重点的几个细节 #

• onsubmit必须加return：只有写onsubmit="return validate()"，当函数返回false时，浏览器才会阻止表单提交；要是只写onsubmit="validate()"，不管函数返回啥，表单都会直接提交。
• 手动触发验证：动态设置required后，浏览器不会自动重新检查，所以用checkValidity()判断是否有效，reportValidity()弹出默认提示，和原生验证体验一致。
• 优先用DOM属性操作：input.required = true比setAttribute更稳妥，因为required是布尔类型的DOM属性，用setAttribute有时候会因为属性值的类型问题出bug。

这样改完之后，点击提交时输入框会变成必填项，空着的话会弹出提示，阻止提交；填了内容才会正常提交表单~

内容的提问来源于stack exchange，提问作者Maththi Basava Koteswara Raavu