Question

我有一个带有文字输入的表单：

<form name="form1">
    <cfinput type="text" name="text1" id="text1" onChange="someFunc();">
</form>

我只想在某些情况下提交。（我先运行一些错误检查）

<script>
function someFunc() {
    if (1==2) {
    document.form1.submit();
} else {
            alert("Not submitting");
    }
</script>

问题是：即使警报触发正常，但表单仍在提交（除了该表单之外没有其他提交语句！）。

非常感谢，如果有人能够对此有所了解。。。

Answer 1

这种方法存在根本缺陷。您目前正在告诉表单text1发生更改时，请致电someFunc()。如果为true，请使用JavaScript提交表单。如果不对，请继续关注您的业务。如果在文本输入中按Enter键，表单仍会提交。如果有一个单击的提交按钮，表单仍然会提交。

解决这个问题的基本方法是：

<form name="form1" onsubmit="return someFunc()">
    <input type="text" name="text1" id="text1">
</form>

提交来自时，请致电someFunc()。此函数必须返回true或false。如果返回true，则表单提交。如果为false，则表单不执行任何操作。

现在您的JavaScript需要稍作修改：

<script>
function someFunc() {
    if (1==2) {
        return true;
    } else {
        alert("Not submitting");
        return false;
    }
}
</script>

当字段更改时，您仍然可以调用其他函数，但他们仍然无法管理表单的最终提交。事实上，someFunc()可以在返回true或false之前调用其他函数进行最终检查。

编辑： Documentation on implicit form submission.

编辑2：

此代码：

$(document).ready(function(){ 
    $("#text1").on('change', function(event){ 
        event.preventDefault(); 
    }); 
});

正在停止与该元素关联的change事件的默认处理。如果您想影响submit事件，那么您可以这样做：

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
        event.preventDefault(); 
    }); 
});

这将允许你做这样的事情：

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
        if ( $('#text1').val() !== "foo" ) {
            alert("Error");
            event.preventDefault(); 
        }
    }); 
});

Answer 2

 var form = document.getElementById("Your Form ID");

 form.addEventListener("submit", function (e) {
      if ("Your Desired Conditions.") {
          e.preventDefault();
      }
 });

阻止表单提交（javascript）

2 个答案: