在 JavaScript 中使用表单绑定事件

Question

我正在使用 JavaScript 创建 form。喜欢下面

var form = document.createElement('form');
form.action = 'abc.com';
form.noValidate = true;
form.id = 'myForm';
form.onsubmit = 'return validateMyForm();';

我正在尝试添加在提交前检查必填字段的验证器 form。所以我关注JavaScript to stop form submission。但它没有将事件附加到 form。我怎样才能在 JavaScript 中做到这一点？

没有JQuery请。

Answer 1

您必须将函数分配给 onsubmit，而不是字符串：

form.onsubmit = validateMyForm;

不要混淆 DOM 属性 和 HTML 属性 。写一些类似

的东西

<form onsubmit="return foo();">

将（大致）等同于

form.onsubmit = function(event) {
    return foo();
};

使用 DOM 时。

Answer 2

不能将函数放入字符串中。

form.onsubmit = function() {
  var valid = true;

  // TODO: form validation

  // Not valid, return false
  if(!valid) {
    alert('Please correct the following errors:');
    return false;
  }

  // valid, do nothing.
}

Answer 3

您可以直接在 input 上使用 HTML5 的 required 属性，如下所示：

<input type="text" name="lastname" required>

这将导致 html5 在提交前验证字段。根据您要验证的数据类型，还有其他几个属性也可用于验证。

无需使用 javascript 进行验证。

在 JavaScript 中使用表单绑定事件

Bind event with form in JavaScript

javascript

forms

dom

dom-events