javascript - 填写所有必填字段时如何防止默认提交
问题描述
<div class="container">
<form action="">
<fieldset id="contactform">
<legend>Contact Information</legend>
<div id="name">
<div class="info">
<label for="name">Name*<br><br></label>
<input type="text" required>
</div>
</div>
<div id="email">
<div class="info">
<label for="email"> Email*<br><br></label>
<input type="email" required>
</div>
</div>
<div id="msg">
<div class="info">
<label for="message"> Your Message*<br><br></label>
<textarea required id="textarea" cols="25" rows="5"></textarea>
</div>
</div>
<div id="sub">
<input id ="defaultsub" type="submit">
</div>
</fieldset>
</form>
</div>
这是我到目前为止所拥有的,它会阻止默认提交,除非它摆脱了 html5 验证。我想知道如何在我的代码中同时拥有这两者?
document.getElementById("defaultsub").addEventListener("click", function(event){
event.preventDefault();
console.log("Prevent default submission");
alert("ALERT!!!!!");
})
解决方案
好吧,我不知道您为什么希望它仅在填写所有必填字段时才阻止默认提交。
但是,既然你问了,你可以使用document.querySelector('form')
.checkValidity()方法来检查表单是否有效。在您的情况下,您可以像这样使用它
document.getElementById("defaultsub").addEventListener("click", function(event){
if(document.querySelector('form').checkValidity()){
event.preventDefault();
console.log("Prevent default submission");
alert("ALERT!!!!!");
}
})
仅当表单有效时,这将阻止默认表单提交(即,如果填写了所有必填字段)
编辑:
您可能必须checkValidity()
在所需的 INPUT 元素而不是整个 FORM 元素上运行此 t 才能工作,这将花费更多时间来编写。
推荐阅读
- haskell - 将函数与 Haskell 中的类型相关联
- android - 通过 Instagram 2020 实现登录
- docker - 识别本地主机 IP 地址
- asp.net - SignalR 在 Windows Server R2 2012 中不起作用
- unity3d - Unity:Mathf.PerlinNoise 在所有实现/设备/平台上是否一致?
- google-analytics - 如何在页面加载时将多个事件推送到谷歌分析?
- c# - 何时处置 dbcontext
- opencv - cv::VideoCapture 读取实时视频流但无法区分假网址
- shell - 无法理解 `sh !` 在 Jenkins 管道代码中的作用
- php - Yii2进阶,什么时候用frontend文件夹,什么时候用backend文件夹?