Question

考虑使用HTML表单：

<form action="" method="POST" onsubmit="return checkValidArray()">
    <input type="text" name="data" onchange="return validate(this);">
</form>

在IE 6和Firefox 3中显示当您在输入字段中键入一些文本并单击提交时，onchange事件将为输入字段触发，但是在您单击之前不会为表单触发onsubmit事件第二次提交按钮（当然，onchange不会触发）。换句话说，onchange似乎阻止了onsubmit的解雇。

希望在用户退出字段时检查表单中的每个字段，以便为他们提供即时的验证反馈，并且如果存在无效数据，也可以阻止提交表单。

[编辑：请注意，两个验证功能都包含警报（）。]

如何解决这个问题？

Answer 1

解决方案（某种）：

事实证明，在输入的onchange事件期间只存在alert（）或confirm（） - 导致表单的onsubmit事件不会触发。 JS线程似乎被alert（）阻止解决方法是在输入的onchange调用中不包含任何alert（）或confirm（）。

已知受影响的浏览器：
IE6 - Windows
IE8 - 赢 FF3 - 胜利

已知不受影响的浏览器：
谷歌Chrome - 赢 Safari - Mac
FF - Mac

Answer 2

我尝试使用以下代码使用Firefox 3（Mac）：

    <html>
        <head>
            <script>
                function validate(ele)
                {
                    alert("vali");
                    return false;
                }

                function checkValidArray()
                {
                    alert("checkValidArray");
                }

            </script>
        </head>
        <body>
            <form action="" method="POST" onsubmit="return checkValidArray()">
                <input type="text" name="data" onchange="return validate(this);">
                <input type="submit" value="Ok">
            </form>
        </body>
</html>

似乎有效。当我点击Ok按钮时，弹出“Vali”和“Check Valid Array”。最初我认为return false可能是表单未提交的原因，但它已提交（至少，checkValidArray()被调用）。

现在，您在checkValidArray()和validate()方法中做了什么？有什么特别的吗？你可以发布代码吗？

编辑：我在Windows上测试了IE8和FF3，这里两个事件都没有被解雇。我不知道为什么。也许onblur是一个解决方案，但为什么onchange不起作用？是否有特定原因或仅仅是另一个不一致？（适用于Mac上的FF和Safari）

Answer 3

您可以在输入中使用onblur事件而不是onchange。

Answer 4

非常有趣的是，Mac上的行为是不同的，所以它看起来依赖于平台，而不依赖于浏览器。必须在某处有线索......

我尝试使用Nivas的代码onblur，但结果与onchange相同（只有“Vali”警报）。

有什么区别在于你是否在validate（）中执行任何。注释掉线路警报（“vali”）;它的工作原理！（来自validate（）的实际返回值无关紧要，尽管我不指望它。）

编辑：一位同事刚刚在Windows上的谷歌浏览器中尝试了这一点，它在那里工作。由于Chrome分离JS线程的方式，这直观有意义。

阻止线程的第一个alert（）的某些内容会导致onsubmit事件丢失。可能的竞争条件？

Answer 5

不要创造;提交按钮。相反，创建一个普通按钮并编写一个函数，可以使用该按钮调用onClick。

函数将对表单字段进行验证，如果一切正常，它将提交表单。否则就不会。

function validate
{
  "Piece of code to Validate your form"
  document.formName.action.value = "URL which you want to call"
 document.propFile.submit(); // It will submit he page
}

Javascript onchange事件阻止HTML表单中的onsubmit事件？

5 个答案: