防止表单提交(javascript) [英] prevent form submission (javascript)

问题描述

我有一个带有文本输入的表单:

I have a form with a text input:

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

我只希望它在某些情况下提交.(我先运行一些错误检查)

I only want it to submit in certain cases. (I run some error-checking first)

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

问题是:即使警报触发正常，但不知何故，表单仍在提交(除了那个提交语句之外没有其他提交语句！).

The problem is: even though the alert is triggering fine, somehow, the form is still submitting (There are no other submit statements aside from the one!).

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

Many thanks if anyone can shed some light on this . . .

推荐答案

这种方法存在一个根本性缺陷.您当前告诉表单，当 text1 更改时，调用 someFunc().如果为 true，则使用 JavaScript 提交表单.如果是假的，请继续您的业务.如果您在文本输入中按 Enter 键，表单仍会提交.如果有一个提交按钮被点击，表单仍然提交.

There's a fundamental flaw with this approach. You are currently telling the form that when text1 changes, then call someFunc(). If true, use JavaScript to submit the form. If false, go on about your business. If you hit enter in the text input, the form still submits. If there is a submit button that gets clicked, the form still submits.

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

The basic way to approach this is like so:

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

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

When the from is submitted, call someFunc(). This function must return either true or false. If it returns true, the form submits. If false, the form does nothing.

现在您的 JavaScript 需要稍作改动:

Now your JavaScript needs a slight alteration:

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

您仍然可以在更改字段时调用其他函数，但它们仍然不会管理表单的最终提交.事实上，someFunc() 可以在向 onsubmit 事件返回真或假之前调用其他函数来做最后的检查.

You can still have other functions called when a field is changed, but they still won't manage the form's final submission. In fact, someFunc() could call the other functions to do a final check before returning true or false to the onsubmit event.

关于隐式表单提交的文档.

编辑 2:

此代码:

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

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

is stopping the default processing for the change event associated with that element. If you want to affect the submit event, then you'd do this:

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

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

Which would allow you to do something like this:

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

这篇关于防止表单提交(javascript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！