3

考虑一个 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 触发。

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

[编辑：请注意，两个验证函数都包含一个 alert()。]

如何解决这个问题？

4

5 回答 5

3

解决方案（某种）：

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

已知受影响的浏览器：
IE6 - Windows
IE8 - Win
FF3 - Win

已知不受影响的浏览器：
Google Chrome - Win
Safari - Mac
FF - Mac

于 2009-01-29T20:23:50.020 回答
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）

于 2009-01-28T22:01:56.287 回答
1

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

于 2009-01-28T21:50:35.200 回答
0

有趣的是，Mac 上的行为有所不同，因此它似乎依赖于平台而不是依赖于浏览器。一定有什么线索……

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

有什么不同的是你是否在 validate() 中做任何事情。注释掉 alert("vali"); 它有效！（来自 validate() 的实际返回值并不重要，尽管我不希望它如此。）

编辑：一位同事刚刚在 Windows 上的 Google Chrome 中尝试过这个，它在那里工作。这在直觉上是有道理的，因为 Chrome 是如何分离 JS 线程的。

关于阻塞线程的第一个 alert() 的某些内容会导致 onsubmit 事件丢失。可能的比赛条件？

于 2009-01-29T17:57:33.963 回答
0

不要创造；提交按钮。相反，创建一个普通按钮并编写一个可以使用该按钮调用 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
}
于 2009-06-22T11:16:46.907 回答