Question

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

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

switch (request.body.op){
    case "update":
        //perform update on resource
    case "add":
        //add resource
    case "other":
        //some other operation
    default:
        //operation doesn't exist
}

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

Answer 1

我假设你将一个函数绑定到一个按钮（或其他东西）上的click事件，然后验证你的表单。

不同的浏览器对此有不同的实现。例如，某些浏览器将获取绑定到元素的函数的返回值（在这种情况下，返回false，就足以停止按钮的默认行为）。其他人没有。

为确保按预期方式运行，您必须使用preventDefault功能。

在此示例中，函数是绑定到元素的click事件的函数。您必须将事件传递给它（在这种情况下称为e。

function(e) {
  e.preventDefault();

  // Your code
  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");
    }

    // Just like you did correctly, return false
    return false;
  }
}

根据您的需要，您必须将preventDefault()向下移动到return false;的正上方（我假设您会想要这样做，如果如果您的验证成功，您希望正常的操作发生。）

Answer 2

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

我不确定您的HTML是什么样的，但我确信您可以使用document.getElementById修改这些行，并确保您的表单中包含method和{{1} }属性并没有使用内联事件处理程序（即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
  }
});

设置 <form id="yourForm" action="somewhere.php" method="GET"> <input id="dateField" type="text"/> <input id="timeField" type="text"/> <input type="submit"/> </form>只是一种与Internet Explorer 8兼容的方式，如this SO question中所述。如果您希望与这些旧版浏览器完全兼容，则还需要兼容版本的e.returnValue。你可以使用jQuery。而你don’t need to remove return false;也是。

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

上述代码应涵盖在大多数或更少现代浏览器中取消提交。如果仍有问题，可以执行变通方法并禁用“提交”按钮，或者删除!field.value属性或类似内容，如果字段无效。

Safari表单提交 - 返回false不起作用

2 个答案: