为什么这个JavasScript验证在Firefox中不起作用

Why is this JavasScript validation not working in Firefox

本文关键字：Firefox 不起作用 验证 JavasScript 为什么      更新时间：2023-09-26

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

有一点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);

这是JsFiddle 的链接

在firefox窗口中，event未定义，您的代码失败并出现错误。

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

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

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

onclick="submitForm(event)"

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

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

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

相关文章：