javascript - Safari 表单提交 - 返回 false 无效

Question

这是我在 Stack 上的第一篇文章 - 我对编码还很陌生......

我在 Safari 中的表单验证返回 false 时遇到问题。 return false 在 Chrome 和 Firefox 上工作得很好，但是当在 Safari 中提交不完整的表单时，警报会触发，但表单提交仍然会继续。这是相关代码，非常基本的东西......

if (dateField == null || dateField == "" || timeField == null || timeField == ""){

        if (dateField == null || dateField == ""){
            alert("Please select a date");
            }

        if (timeField == null || timeField == ""){
            alert("Please select a time");
            }

            return false;
        };

我见过类似的问题，但没有什么能完全解决我的问题。无论如何，我知道这可能是一个非常业余的问题，但我非常感谢你的帮助。谢谢!

Answer 1

要阻止发送表单，只需使用 Event.preventDefault :

我不确定您的 HTML 究竟是什么样子，但我相信您可以使用 document.getElementById 调整行并确保您的表单具有 method 和 action 属性，并且没有使用内联事件处理程序(即 onsubmit="…")。

// Assuming the DOM is loaded at this point.

var yourForm=document.getElementById('yourForm');

yourForm.addEventListener('submit',function(e){
  "use strict";
  /* If you want to use variables,
     make sure to update their value before checking. */
  var dateField=document.getElementById('dateField').value,
    timeField=document.getElementById('timeField').value;

  if(!dateField || !timeField){ // Validation
    // Message
    if(!dateField){
      alert("Please select a date.");
    }
    else if(!timeField){
      alert("Please select a time.");
    }

    // Prevent the form from sending
    if(e.preventDefault){
      e.preventDefault();
    }
    else if(e.returnValue){
      e.returnValue=false; // For IE8
    }
    return false; // Just to be safe
  }
});

<!-- Here’s a potential HTML structure: -->
<form id="yourForm" action="somewhere.php" method="GET">
  <input id="dateField" type="text"/>
  <input id="timeField" type="text"/>
  <input type="submit"/>
</form>

设置e.returnValue 只是一种与Internet Explorer 8 兼容的方式，正如this SO question 中指出的那样.如果您想与这些旧版浏览器完全兼容，您还需要兼容版本的 addEventListener。您可以为此使用 jQuery。还有你don’t need to remove return false; , 要么。

此外，请在验证您的输入时小心。与空字符串进行比较时，使用 === 或 !== 来避免类型强制转换。如果您确定输入元素始终存在，那么一个简单的 !field.value 就足够了。我建议使用 JSHint 验证您的代码.

上面的代码应该包括在大多数或多或少现代的浏览器中取消提交。如果仍有问题，您可以采取变通方法并禁用提交按钮或删除 method 属性或类似字段(如果字段无效)。