在onsubmit内部未调用JS表单验证功能

Question

I am trying to run a form validation on an HTML form with pureJS.

Here is my code:

<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);
}

new link without typo: http://jsfiddle.net/mech8bon/

http://jsfiddle.net/4bjmh9as/

Expected: to call the alert then the function.

Result: nothing called at all.

Answer 1

Open the developer tools in your browser. Look at the console. Read the error message.

Uncaught TypeError: Cannot read property 'elements' of undefined

---

You are passing the variable myForm :

 validateForm(myForm); 

But then you are treating it as a string containing a property name:

 const form = document.forms[formName]; 

String literals need quotes around them:

validateForm('myForm');

Answer 2

The solution thanks to Ric and Quentin in this fiddle: http://jsfiddle.net/eg89b02j/2/

<form name="myForm" action="" onsubmit="return validateForm(this);" novalidate>

The first fix was adding novalidate attribute to the form tag.

The second fix was making the form more generic by sending the form itself instead of name.