javascript - 防止表单提交(javascript)

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()。如果为真，则使用 JavaScript 提交表单。如果为假，请继续您的业务。如果您在文本输入中按下回车键，表单仍会提交。如果点击提交按钮，表单仍会提交。

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

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

提交 from 时，调用 someFunc()。此函数必须返回 true 或 false。如果它返回 true，则表单提交。如果为 false，则表单不执行任何操作。

现在您的 JavaScript 需要稍微改动一下:

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

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

编辑: 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(); 
        }
    }); 
});