为什么这个 Javascript 验证在 Firefox 中不起作用答案

【问题标题】：Why is this JavasScript validation not working in Firefox为什么这个 Javascript 验证在 Firefox 中不起作用
【发布时间】：2016-03-29 09:58:44
【问题描述】：

我有一个带有文本输入和按钮的表单。

有一点 JavaScript 来验证用户名是否为空。如果为 null，则显示验证消息，否则将提交表单。

问题是 onclick 在 Firefox 中甚至不会触发。它适用于所有其他浏览器。

有人可以指出我哪里出错了吗？非常感谢。

HTML: <form name="myForm" action="TestController"> <input type="text" width="50" name="username" /> <button onclick="submitForm()">Go</button> <span class="errSpan"></span> </form>

JavaScript：

(function(NAMESPACE){

NAMESPACE.submitForm = function(){
    console.log('invoked');
    window.event.preventDefault();
  console.log(window.myForm.username.value);

  if(window.myForm.username.value === "")
    document.getElementsByClassName('errSpan')[0].innerHTML = 'cannot be null';
  else {
    document.myForm.submit();
  }
}
})(window);

Here is link to JsFiddle

【问题讨论】：

有任何解决方案吗？给定的答案都不起作用。虽然它在基于 Chromium 的浏览器（Edge 和 Chrome）上运行良好

标签： javascript forms validation submit

【解决方案1】：

在 firefox 中，window.event 未定义，您的代码因错误而失败。

使用 addEventListener 为表单添加提交事件，并从按钮中删除 onclick 语句。

window.myForm.addEventListener('submit', function (e) {
    e.preventDefault();
    //any code what you want
});

【讨论】：

【解决方案2】：

首先您应该将事件传递给submitForm() 方法。

onclick="submitForm(event)"

然后使用该事件参数调用preventDefault

NAMESPACE.submitForm = function(e){
    console.log('invoked');
    e.preventDefault();
    console.log(window.myForm.username.value);
    ...
}

或使用onsubmit 方法调用您的提交函数并停止事件传播，即提交表单。

【讨论】：