Question

我们在表单中有几个文本框。所有这些都经过验证。该表单将通过单击锚标记提交。

<script>
function validateMyText(){
    // do field validation
    // if success
    return true;
    // else {
    alert("Please check the text box value");
    return false;
    }
}
</script>

<form name="myform" action="mytestpage.jsp">
    <input type="text" name="myText" id="myText" onblur="return validateMyText()"/>
    <a href="#" onclick="mytestpage.jsp">Submit</a>
</form>

Windows平台浏览器（Firefox，Safari，Chrome，IE）：当validateMyText（）返回false时，不会触发onclick。这是预期和现有的行为。

Mac平台浏览器（Firefox，Safari）：即使在validateMyText（）返回false之后，也会触发onclick事件，提交表单。

背景：这是仅在Windows平台和IE浏览器上支持的遗留应用程序。现在必须对Windows和Firefox上的所有浏览器（Firefox，Safari，Chrome，IE），Mac上的Safari进行增强。

谢谢，马修

Answer 1

如果我正确阅读，看起来该应用依赖于false事件后blur事件返回任何具有“无效”数据的字段来中断表单提交。因此，假设任何其他未聚焦的字段都是有效的，您不能在不使其有效的情况下保留文本字段，并且您单击锚标记的唯一方法是在保留之前选择的情况下文本域。很多假设。最善良的说法是它很脆弱 - 用户如何点击Enter？

至少，我会创建一个新函数来处理表单提交。我现在不知道那个锚标签里发生了什么。为清楚起见，请在表单标记中添加ID。然后：

<a href="#" onclick="document.getElementById('myform').submit(); return false;">

现在默认点击将被取消，您将运行表单的“自然”提交行为。由于我们希望在提交之前进行验证，因此我们在表单级别添加onsubmit事件处理程序：

<form name="myform" id="myform" action="mytestpage.jsp" onsubmit="return submitForm();">

现在我们将进行表单级验证，并返回true进行提交，false表示无。在JavaScript中添加以下内容：

function submitForm() {
    // identify fields eligible for validation
    // validate them according to your rules
    // then submit the form
    if( all_your_fields_are_valid ) { // for you to figure out
        return true;
    } else {
        // dialog explaining problem?
        // highlight bad fields?
        return false;
    }
}

您仍然会对无效数据进行逐字段警告，但现在至少您明确地捕获表单提交，并将表单视为具有其自身整体有效和无效状态的实体。这样的设置应该可以在任何平台上的任何合理的现代浏览器中正常工作。

所有这一切，我强烈建议添加great JS frameworks之一。它们会让事情变得更容易，特别是如果你想要清理并将行为移植到许多现有代码上。

问题：在Mac机器上的onblur之后触发了Onclick

1 个答案: