如何防止表单中的默认值？ [复制]

Posted 2023-02-22

【中文标题】如何防止表单中的默认值？ [复制]

【英文标题】：How to preventDefault in forms? [duplicate]

【发布时间】：2021-04-10 18:48:01

【问题描述】：

我有一个带有一些输入的表单，我想对该表单进行 js 验证。但是，preventDefault 不适合我。

html 代码

<form action="" id="form">
    <h2>Send us a message</h2>
    <div class="input-box" id="nameInputBox">
        <small class="errorMsg-hidden">error msg</small>
        <input type="text" name="" required id="name">
        <span>Name</span>
    </div>
    <div class="input-box">
         <input type="submit" name="" value="Nosūtīt" id="submit">
     </div>
</form>

JS 代码

const form = document.getElementById('form');
const name = document.getElementById('name');

form.addEventListener('submit', (e) => 
    e.preventDefault();
);

在这种情况下，将 required 属性保留在 html 中很重要，因为某些样式取决于 :valid 伪类。

这里有什么解决办法吗？

【问题讨论】：

“在 html 中保留所需的属性很重要”？您没有更改属性。你甚至没有输入类型提交或按钮。

在您的表单中没有看到提交的字段？

哦，抱歉，我忘记将提交按钮代码添加到我在这里添加的表单代码中。所做的编辑。 @StackSlave

鉴于您对蒂芙尼回答的评论，您的问题实际上是关于自定义错误消息； .preventDefault() 不是真正的问题。

您是否阅读过这个问题的答案：***.com/questions/5272433/…？鉴于您明显关注自定义错误消息，这似乎可以解决您的问题？

【参考方案1】：

你可以加e.stopPropagation();

const form = document.getElementById('form');
const name = document.getElementById('name');

form.addEventListener('submit', (e) => 
    e.preventDefault();
    e.stopPropagation();
);

<form action="" id="form">
<h2>Send us a message</h2>
<div class="input-box" id="nameInputBox">
    <small class="errorMsg-hidden">error msg</small>
    <input type="text" name="" required id="name">
    <span>Name</span>
</div>
</form>

问题有点令人困惑。 可能这会起作用......“用户”是有效的用户名（仅供测试）

const form = document.getElementById('form');

var subMit = function(event) 
    let name = document.getElementById('name');
    if(name.value === "user")
        document.getElementById('ChangeName').textContent = name.value;
      document.getElementById('errorMsg-hidden').textContent = "Looks Good";
    else
        document.getElementById('errorMsg-hidden').textContent = "Validation Error";
    
    event.preventDefault();
;

form.addEventListener("submit", subMit, true);

<form action="" id="form">
<h2>Send us a message</h2>
<div class="input-box" id="nameInputBox">
    <small id="errorMsg-hidden">error msg</small><br>
    <input type="text" name="" required id="name"><br>
    <span id="ChangeName">Name</span>
    <br/>
    <input type="submit" value="Submit">
</div>
</form>

【讨论】：

感谢您的回答，但这一次对我没有帮助

它以什么方式“没有帮助”？你要求这个答案没有解决什么？如果您不解释她的尝试失败的地方以及有什么必要，蒂芙尼打算如何改进她的答案？

当我按下表单的提交按钮时，如果输入的值未验证，我想添加自定义错误消息。使用 Tiffany 提供的代码，如果输入的值未验证，表单仍会显示默认错误消息。实际上，如果我有一个字段为空，他们甚至根本不验证。它只是一直显示默认错误消息，即某个字段不能为空。 @DavidsaysreinstateMonica

您不应该（不）需要.stopPropagation() 来阻止表单提交——.preventDefault() 应该这样做。事实上，我无法重现 OP 的问题；如果我将确切的 HTML 和代码放在本地网络服务器上，它确实会阻止表单提交。

@predefined: "使用 Tiffany 提供的代码，表单仍显示默认错误消息" - 因为您的问题中没有提到这一点，因此在蒂芙尼的回答。您能否编辑您的问题以详细解释您想要实现的目标？以及您当前的代码如何/在哪里失败，人们可以尝试提供帮助。

【参考方案2】：

如果您想在输入有效或无效时应用一些 css，只需将每个输入绑定到 onChange()。通过这些函数检查有效性，当一个输入有效或不正确时，只需添加一个特定的 css 类。你不再需要:valid。

【讨论】：

您的陈述对我来说似乎很奇怪，因为存在内置表单验证和:valid 伪属性，因此不必将 onChange 处理程序添加到所有内容，而不是相反。监听每个 change 事件是进行表单验证的糟糕的旧方法。