为什么可以提交这个表单？ (火狐)

Question

我在 Firefox（版本 38.05）中遇到一个非常奇怪的错误。我有一个如下所示的表格，并且剪下了一个 Javascript 用于验证

<form action='#' onsubmit='return check()'>
    <input type='text' name='asdf'/>
    <input type='submit' name='jkl' value='Submit'/>
</form>

Javascript

function check(){
    alert("asdf");
    return false;
}

现在绝不能提交此表单。但在 Firefox 中，如果您遵循以下过程，则可以在不禁用 Javascript 的情况下提交它：

点击提交
确认警报对话框
再次点击提交
选中此框以防止进一步提醒 windows 并单击“确定”
点击提交 --> 表单将被提交

这是错误还是功能？在 Chrome 中一切正常。如果这种行为是故意的，我该如何避免？

Answer 1

preventing alert windows in ff causing js errors and sometimes js stop working all after that,所以你的return false;没有执行试试

function check(event){
    event = window.event || event;
    event.preventDefault(); 
    alert("asdf");
    return false;
}

<form action='#' onsubmit='check(event)'>
    <input type='text' name='asdf'/>
    <input type='submit' name='jkl' value='Submit'/>
</form>

Answer 2

每次使用console.log都可以，但可以阻止警报，并且不会调用该函数。

如果需要，您可以显示自己的自定义警报。

您可能应该将事件处理程序从内联中移出：

HTML:

<form action='#' id="my-form">
    <input type='text' name='asdf'/>
    <input type='submit' name='jkl' value='Submit'/>
</form>

JS：

document.getElementById('my-form').onsubmit = function() {
    console.log("asdf");
    return false;
}

Firefox remove 包含 alert 的功能，因此您需要移动 alert out of your function:

这将允许您 return 错误，即使警报被禁用！

document.getElementById('my-form').onsubmit = function() {
    console.log("asdf");
    displayAlert();
    return false;
}
function displayAlert() {
    alert("test");    
}

JsFiddle：http://jsfiddle.net/ghorg12110/nddtf13q/

要显示自定义警报：

此代码将显示一个自定义警告框，Firefox 无法使用 div 阻止它。你应该做一些 CSS 让它像你想要的那样，但主要思想在这里：

HTML:

<form action='#' id="my-form">
    <input type='text' name='asdf' />
    <input type='submit' name='jkl' value='Submit' />
</form>
<div id="alertBox">
    <div id="alertContent">asdf</div>
    <button id="alertOK">OK</button>
</div>

CSS:

#alertBox {
    display:none;
    background: grey none repeat scroll 0 0;
    left: 50%;
    margin-left: -275px;
    position: fixed;
    text-align: center;
    width: 550px;
    z-index: 10;
}

JS：

document.getElementById('my-form').onsubmit = function () {
    displayAlert("asdf");
    return false;
}
function displayAlert(msg) {
    document.getElementById('alertContent').innerHTML = msg;
    document.getElementById('alertBox').style.display = "block";
    document.getElementById('alertOK').onclick = function () {
        document.getElementById('alertBox').style.display = "none";
    };
}

JsFiddle：http://jsfiddle.net/ghorg12110/dkruqsqv/

Answer 3

所以当 alert() 被用户阻止时调用时，Firefox 和 Chrome 有不同的行为！

虽然 Chrome 只是默默地失败，但在 Firefox 中尝试 alert 当它被用户阻止时会抛出异常。并且 onSubmit 处理程序仅在函数明确 returns false 时才被阻止。

一个有点脏的修复方法是：

function check() {
  try {
    alert('foo');
  }
  catch {
    //User prevented alerts, fallback
    showSomehow('foo'); //use a log, a div on the top of the page, ...
  }
  return false;
}

人们需要比我更有动力并深入研究规范才能知道谁是对的。

为什么可以提交这个表单？ (火狐)

Why can this form be submitted? (Firefox)

html

javascript

forms

firefox

onsubmit