Question

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

有一些JavaScript可以验证用户名是否为null。如果为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

Answer 1

在firefox中，window.event未定义，您的代码失败并显示错误。

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

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

Answer 2

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

onclick="submitForm(event)"

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

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

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

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

2 个答案: