在 Javascript 中将事件与表单绑定答案

【问题标题】：Bind event with form in Javascript在 Javascript 中将事件与表单绑定
【发布时间】：2015-10-01 12:33:41
【问题描述】：

我正在使用 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。

【问题讨论】：

标签： javascript forms dom javascript-events

【解决方案1】：

你必须为onsubmit分配一个函数，而不是一个字符串：

form.onsubmit = validateMyForm;

不要将 DOM 属性 与 HTML 属性 混淆。写类似

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

将（大致）等同于

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

使用 DOM 时。

【讨论】：

【解决方案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.
}

【讨论】：

【解决方案3】：

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

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

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

无需使用 javascript 进行验证。

【讨论】：