适用于 Chrome 但不适用于 Safari - 一个隐藏的 DIV，仅在提交包含所有必填字段的表单时显示

Posted 2023-05-09

【中文标题】适用于 Chrome 但不适用于 Safari - 一个隐藏的 DIV，仅在提交包含所有必填字段的表单时显示

【英文标题】：Works in Chrome but not Safari -- a hidden DIV to only show on submission of form with all required fields

【发布时间】：2016-02-03 19:10:12

【问题描述】：

我已经创建了一个 html5 联系表单作为该网站上结帐系统的一部分：http://www.organik-music.com/。

我进行了设置，以便在用户提交表单时显示以前隐藏的 DIV。此 DIV 包含最终付款按钮。基本上，我希望购买者在他们能够完成付款之前提供一些信息。付款是通过将数据发送到 PayPal 的第三方插件进行的，该网站是自定义的 Wordpress 安装。

在 Chrome 和其他浏览器中，仅当填写了必填字段时才会显示此 DIV。这些必填字段标有 required="true"。然而，在 Safari 中，它一直不起作用，所以我在表单中附加了以下内容：

        <script>
var form = document.getElementById('datacapture');
form.noValidate = true;
form.addEventListener('submit', function(event)  // listen for form submitting
    if (!event.target.checkValidity()) 
        event.preventDefault(); // dismiss the default functionality
        alert('Please complete all required fields'); // error message
    
, false);
</script>

虽然这会创建一个弹出框来提示用户填写表单，并且在将数据发送到操作 php 之前需要这样做，但此时也会显示隐藏的 DIV，无论表单是否已完成正确完成。

我用于隐藏 DIV（ID“完成”）的显示/隐藏脚本如下：

<script>
function showHide() 
var div = document.getElementById("complete");
if (div.style.display == 'none') 
 div.style.display = '';

else 
div.style.display = 'block';
 
<script>

所以基本上我希望 Safari 中的功能与我目前在 Chrome 等中获得的功能相同 - 隐藏的 DIV“完成”仅在成功提交表单时显示，包括所有必填字段。我可以使用哪种邮件表单有点受限，因为它需要与插件一起使用。

提前非常感谢！ :)

【问题讨论】：

我认为这是OSX Safari Frame Load Interrupted的副本

感谢链接迈克尔，我看了看，可以看到可能存在连接/类似问题，但无法弄清楚如何将其与我遇到的问题联系起来...... ? :'( 如果可能的话，您能否解释一下我需要查看的内容，将不胜感激

您正在尝试编写 Safari 中 ajax 调用结果的脚本。我发现试图伪造点击我添加的 div 或更改 Safari 中的 url 路径会导致帧加载中断问题或其他错误。 Apple 似乎将任何覆盖 Safari 中预期行为的行为解释为安全违规。

我明白了，感谢迈克尔提供的信息。说实话，Safari 通常是一场噩梦，哈哈。问题是，特定的隐藏/显示功能在 Safari 中运行良好，事实上当用户点击提交时它会显示隐藏的 div，即使表单没有正确完成也是如此。有什么实际的解决方法吗？干杯:)

【参考方案1】：

我发现试图伪造点击我添加的 div 或更改 Safari 中的 url 路径会导致 frame loading interrupt problems 或其他错误。 Apple 似乎将任何超越 Safari 中预期行为的行为解释为安全违规。我对 Safari 的解决方法是使用带有 post 的常规表单并最终重新加载页面。在我的情况下，页面交互很繁重，请求报告，因此用户不介意重新加载可能在服务器端花费几秒钟的操作。