javascript - onsubmit内部没有调用JS表单验证函数

Question

我正在尝试使用 pureJS 在 HTML 表单上运行表单验证。

这是我的代码:

<form name="myForm" action="" onsubmit="alert('hello world');return validateForm(myForm);">
<label>
    <input name="username" placeholder="Name" type="text" required>
</label>
<label>
    <input name="email" placeholder="Email" type="email" required>
</label>
<input type="submit" value="Submit 1">
<button type="submit">Submit 2</button>
<button>Submit 3</button>

function validateForm(formName) {
  const form = document.forms[formName];
  for(let i = 0; i < form.elements.length; i++){
    const element = form.elements[i];

    // validation fails if element is required and blank
    if(element.attributes["required"] && !element.value.length){
        element.focus();
        return false;
    }

    // validation fails if email is not valid
    if(element.getAttribute('type') === "email" && !validateEmail(element.value)) {
        element.focus();
        return false;
    }
  };

  return true;
}

function validateEmail(str) {
    var regexp = /[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*/;
    return regexp.test(str);
}

没有拼写错误的新链接:http://jsfiddle.net/mech8bon/

<罢工> http://jsfiddle.net/4bjmh9as/

预期:调用警报，然后调用函数。

结果:根本没有调用任何内容。

Answer 1

在浏览器中打开开发人员工具。查看控制台。阅读错误消息。

Uncaught TypeError: Cannot read property 'elements' of undefined

<小时/>

您正在传递变量 myForm:

validateForm(myForm);

但是您将其视为包含属性名称的字符串:

const form = document.forms[formName];

字符串文字需要用引号引起来:

validateForm('myForm');