提问人：Ahil Khan 提问时间：11/15/2018 最后编辑：Marco BonelliAhil Khan 更新时间：12/30/2020 访问量：12472
使用 JavaScript 时停止表单提交
Stop form submission when using JavaScript
问：
我有一个表单，如果这个数字小于 15，用户输入一个 cnic 号码，然后提醒消息并停止表单提交，但问题是当数字小于 15 时，表单提交无法停止。cnic
<script>
function validateform()
{
var cnic1 = document.getElementById("cnic1").value;
if (cnic1.length < 15)
{
window.alert("Invalid CNIC");
cnic1.focus();
return false;
}
}
</script>
<form class="col s12" action="tabs.php" method="post" enctype="multipart/form-data" name="applyform">
<div class="row">
<div class="input-field col s1"></div>
<div class="input-field col s4"><label>CNIC No. </label>
<font style="color: #ff0000">*</font>
</div>
<div class="input-field col s6">
<input id="cnic1" name="cnic1" type="text" value="<?php echo $RowAcc['cnic'];?>" maxlength="15" placeholder="CNIC #" required>
</div>
</div>
</form>
php提交代码在页面上写是否有问题，这就是为什么表单仍在提交过程？tabs.php
答：
7赞
Marco Bonelli
11/15/2018
#1
您无需返回即可停止提交表单。您需要使用事件的方法，如果数据有效，请使用 JS 提交表单。喜欢这个：falsepreventDefault()
function validateform(e) { // take the event as parameter
e.preventDefault(); // stop the submission
var cnic1 = document.getElementById("cnic1");
if (cnic1.value.length < 15) {
window.alert("Invalid CNIC");
cnic1.focus();
} else {
form.submit();
}
}
var form = document.getElementsByName('applyform')[0];
form.addEventListener('submit', validateform);
我还使用 JS 添加了侦听器，以便您可以确保将事件参数传递给验证函数。从表单中删除。onsubmit="..."
评论
0赞
CertainPerformance
11/15/2018
当只选择单个元素时，我更喜欢 ，而不是使用返回集合的方法并继续选择集合中的第一个元素querySelector
0赞
Marco Bonelli
11/15/2018
@CertainPerformance 这是一样的，如果匹配名称，使用 querySelector 会更慢、更复杂。
0赞
Ahil Khan
11/15/2018
如果CNIC号码少于15，表格仍在提交中
0赞
Marco Bonelli
11/15/2018
@AhilKhan，您是否使用 JS 添加了事件侦听器并删除了 onsubmit=“...”从 HTML？
0赞
Marco Bonelli
11/15/2018
@AhilKhan 好吧，只是在函数声明之后。请确保您也在表格之后。<script>
-1赞
zhe niu
11/15/2018
#2
return false;
或
event.preventDefault();
0赞
Arnab Banerjee
11/15/2018
#3
从 onchange = “” 事件调用 js 函数，或者使用任意按钮调用 click 事件。你的js函数将起作用。
-1赞
Moudinho
12/30/2020
#4
您可以使用 peventDefault（） 方法
评论