阻止表单提交(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().如果为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之前调用其他函数进行最终检查,以返回onsubmit事件.

编辑: 隐式表单提交的文档.

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