Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/430.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用submit eventlistener停止表单提交_Javascript_Html_Javascript Events - Fatal编程技术网

Javascript 使用submit eventlistener停止表单提交

Javascript 使用submit eventlistener停止表单提交,javascript,html,javascript-events,Javascript,Html,Javascript Events,我正在尝试使用submit eventlistener阻止表单提交。我的匿名函数运行,但表单仍然提交,即使函数末尾返回false也是如此。没有抛出任何JS错误 我犯了什么愚蠢的错误吗 <form id="highlight"> Row: <input type="text" name="rows" value="1" id="rows"> Column: <input type="text" name="cells" value="1" id="ce

我正在尝试使用submit eventlistener阻止表单提交。我的匿名函数运行,但表单仍然提交,即使函数末尾返回false也是如此。没有抛出任何JS错误

我犯了什么愚蠢的错误吗

<form id="highlight">
    Row: <input type="text" name="rows" value="1" id="rows">
    Column: <input type="text" name="cells" value="1" id="cells">
    <input type="submit" name="Submit" value="Highlight" id="Submit">
</form>

<script>
var highlight_form = document.getElementById('highlight');
highlight_form.addEventListener('submit', function() {
        alert('hi');
    return false;
}, false);
</script>

行:
专栏:
var highlight_form=document.getElementById('highlight');
突出显示_form.addEventListener('submit',function(){
警报(“hi”);
返回false;
},假);

我总是对要取消事件的事件侦听器调用
event.preventDefault()
,并返回
false
。这对我来说总是有效的

<script>
var highlight_form = document.getElementById('highlight');

highlight_form.addEventListener('submit', function(event)
{
    event.preventDefault();
    alert('hi');
    return false;

}, false);
</script>

var highlight_form=document.getElementById('highlight');
突出显示表单addEventListener('submit',函数(事件)
{
event.preventDefault();
警报(“hi”);
返回false;
},假);

为了防止表单提交,我一直使用“onclick”事件调用javascript方法,该方法将执行某些操作,然后从那里提交。您还可以按如下方式设置表单:

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

这就是我要做的:

function validate (form)
{
    // return false if some fields are not right
}

function setup_form_validation (form)
{
    form.addEventListener (
        'submit',
        function (f) { // closure to pass the form to event handler
            return function (evt) {
                if (!validate (f)) evt.preventDefault();
                // Return status doesn't work consistently across browsers,
                // and since the default submit event will not be called in case
                // of validation failure, what we return does not matter anyway.
                // Better return true or nothing in case you want to chain other
                // handlers to the submit event (why you would want do that is
                // another question)
            };
        } (form),
    false);
}
不过,我更希望有一个布尔值保持表单验证状态。每次字段更改时更新状态比仅在用户尝试提交整个表单时进行检查更好


当然,这在IE8和其他较旧的浏览器中会失败。您还需要另一个血腥的事件抽象层才能使其在任何地方都能工作。

当我将return false更改为return true(或return)时,的可能副本对我都不起作用。@zeuf仍然使用
event.preventDefault()
或no?
function validate (form)
{
    // return false if some fields are not right
}

function setup_form_validation (form)
{
    form.addEventListener (
        'submit',
        function (f) { // closure to pass the form to event handler
            return function (evt) {
                if (!validate (f)) evt.preventDefault();
                // Return status doesn't work consistently across browsers,
                // and since the default submit event will not be called in case
                // of validation failure, what we return does not matter anyway.
                // Better return true or nothing in case you want to chain other
                // handlers to the submit event (why you would want do that is
                // another question)
            };
        } (form),
    false);
}