为什么按下提交按钮后会发生引导表单验证？

Question

我有一个使用 bootstrap 构建的表单，我发现表单验证不会在提交按钮的 onclick 事件之前运行，这有点无用。

请参阅此小提琴示例 - 按 2 个表格上的注册按钮即可了解我的意思。

http://jsfiddle.net/5tr34k/ax13nLof/

我想要一种方法来防止 onclick 事件发生，直到表单验证成功通过，然后运行 onclick javascript

<h3>Example</h3>
<form action="" method="post" name="registration_form1">
    <input type="text" class="form-control" placeholder="Username" required name="username" id="username">
    <input type="email" class="form-control" placeholder="Email" required="true" name="email" id="email">
    <input type="password" class="form-control" placeholder="Password" required name="password" id="password">
    <input type="password" class="form-control" placeholder="Confirm Password" required name="confirmpwd" id="confirmpwd">
    <button id="myButton2" onclick="alert('i happen before validation');" type="submit" class="btn btn-default" >Register</button>
</form>

在上面的代码中，JavaScript 警报在表单验证之前运行。可以阻止或更改此情况，以便 javascript 在表单验证后运行吗？

Answer 1

需要使用表单的提交事件，而不是按钮的点击事件

$('#form').on('submit', function (e) {
    //your awesome code here
    alert('I HAPPEN BEFORE FORM VALIDATION');
})

演示：小提琴