使用JavaScript时停止表单提交

我有一个表单，用户输入一个cnic编号，如果该编号小于15，则向msg发出警报并停止表单提交，但问题是当

cnic

编号小于15时，表单提交无法停止

<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>

函数validateform（）
{
var cnic1=document.getElementById（“cnic1”）.value；
如果（cnic1.长度<15）
{
窗口警报（“无效CNIC”）；
cnic1.focus（）；
返回false；
}
}
中国互联网络信息中心第号。
*
您不必返回
false
来阻止表单提交。您需要使用事件的
preventDefault（）
方法，如果数据有效，则使用JS提交表单。像这样：

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);

函数validateform（e）{//将事件作为参数
e、 preventDefault（）；//停止提交
var cnic1=document.getElementById（“cnic1”）；
如果（cnic1.value.length<15）{
窗口警报（“无效CNIC”）；
cnic1.focus（）；
}否则{
表单提交（）；
}
}
var form=document.getElementsByName（'applyform'）[0]；
格式。addEventListener（“提交”，validateform）；

我还使用JS添加了监听器，这样您就可以确保将事件参数传递给验证函数。从表单中删除
onsubmit=“…”
。
您不必返回
false来阻止表单提交。您需要使用事件的
preventDefault（）
方法，如果数据有效，则使用JS提交表单。像这样：

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);

return false; 

函数validateform（e）{//将事件作为参数
e、 preventDefault（）；//停止提交
var cnic1=document.getElementById（“cnic1”）；
如果（cnic1.value.length<15）{
窗口警报（“无效CNIC”）；
cnic1.focus（）；
}否则{
表单提交（）；
}
}
var form=document.getElementsByName（'applyform'）[0]；
格式。addEventListener（“提交”，validateform）；

我还使用JS添加了监听器，这样您就可以确保将事件参数传递给验证函数。从表单中删除
onsubmit=“…”

return false; 

或

或

从onchange=”“事件调用js函数，或使用任意按钮调用click事件。你的js功能会正常工作
 从onchange=”“事件调用js函数，或使用任意按钮调用click事件。你的js功能会正常工作
 你可以使用方法
你可以使用方法
你可以使用e.stopPropagation（）；您可以使用e.stopPropagation（）；当只选择单个元素时，我更喜欢
querySelector
，而不是使用返回集合并继续选择集合中的第一个元素的方法collection@CertainPerformance是一样的,，若匹配一个名字，使用querySelector会更慢、更复杂。若CNIC编号小于，表单仍在提交中15@AhilKhan您是否使用JS添加了事件侦听器并从HTML中删除了onsubmit=“…”？@AhilKhan嗯，就在函数声明之后。Amd请确保您的
也在表单后面。当仅选择单个元素时，我更喜欢
querySelector
，而不是使用返回集合并继续选择表单中的第一个元素的方法collection@CertainPerformance是一样的,，若匹配一个名字，使用querySelector会更慢、更复杂。若CNIC编号小于，表单仍在提交中15@AhilKhan您是否使用JS添加了事件侦听器并从HTML中删除了onsubmit=“…”？@AhilKhan嗯，就在函数声明之后。Amd请确保您的
也在表单后面。