点击提交按钮后submit事件没有被触发

Question

var forms = document.querySelectorAll("form")
for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener("submit", function (e) {
        console.log(this);
        if (!this.checkValidity()) {
            e.preventDefault();
        }
    }, true);
}

    <form role="form">
        <p id="form-err"></p>
        <fieldset>
            <legend>Contact Info</legend>
            <label for="name">name</label>
            <input type="text" name="name" id="name" required autocomplete="name">
            <label for="email">email</label>
            <input type="email" name="email" id="email" placeholder="you@example.com" required autocomplete="email">
        </fieldset>
        <button class="btn" id="btn" type="submit">check</button>
    </form>

控制台中观察不到this的输出

---

更新结果：
submit事件在填写的表单内容符合要求时才会被触发。所以我后面的 if (!this.checkValidity()
如果我将表单全部填对的话是能看到this的输出的。
@yunkehe 绑定在submit上的确能阻止跳转,我这里没有成功阻止跳转是因为我的if语句没有意义造成的

在submit事件触发时验证表单内容来阻止表单提交是为了验证在js中自定义的检测
比如

<form id="passwordForm" novalidate>
    <fieldset>
        <legend>Change Your Password</legend>
        <ul>
            <li>
                <label for="password1">Password 1:</label>
                <input type="password" required id="password1" />
            </li>
            <li>
                <label for="password2">Password 2:</label>
                <input type="password" required id="password2" />
            </li>
        </ul>
        <input type="submit" />
    </fieldset>
</form>
<script>
    var password1 = document.getElementById('password1');
    var password2 = document.getElementById('password2');

    var checkPasswordValidity = function() {
        if (password1.value != password2.value) {
            password1.setCustomValidity('Passwords must match.');
        } else {
            password1.setCustomValidity('');
        }        
    };

    password1.addEventListener('change', checkPasswordValidity, false);
    password2.addEventListener('change', checkPasswordValidity, false);

    var form = document.getElementById('passwordForm');
    form.addEventListener('submit', function() {
        checkPasswordValidity();
        if (!this.checkValidity()) {
            event.preventDefault();
            //Implement you own means of displaying error messages to the user here.
            password1.focus();
        }
    }, false);
</script>

通过 setCustomValidity('Passwords must match.'); 如果两个密码不匹配的话，this.checkValidity() 将会返回false。此时表单提交将会被阻止。
每次通过checkValidity方法验证表单元素正确性的时候且验证失败，出错节点的invalid事件会被触发，我们可以在这里添加一些对用户有用的信息。
例子来自 http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

Answer 1

this应该是可以打出来的，我猜问题出在this.checkValidity()，代码改成这样试试：

var forms = document.querySelectorAll("form")
for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener("submit", function (e) {
        console.log(this, this.checkValidity());
        e.preventDefault();
    }, true);
}

看看打出来是什么

Answer 2

submit事件是触发了的，触发后，没有成功阻止页面的默认跳转，所有没看到打印的this;