JS表单验证在输入错误后卡住了

Question

我正在尝试为确认密码＆＃39;实施表单验证。领域，但它非常困难。我的表单上有onsubmit="validate()个属性，而且下面的JavaScript调用正常，但是如果输入错误的详细信息，我可以看到两个问题。固定：

a）除非我点击提交＆＃39;否则不会显示该消息。再次

b）当我纠正确认密码框时，它仍然显示消息

我的代码如下：

@{
    ViewBag.Title = "Login or Register";
}

<div class="jumbotron">
    <h2>Login or Register</h2>
</div>
<div class="row">
    <div class="col-xs-6">
        @using (Html.BeginForm("CheckLogin", "Account", FormMethod.Get))
        {
            <input type="text" class="form-control" name="username" required placeholder="Username..." />
            <br />
            <input type="password" class="form-control" name="password" required placeholder="Password..." />
            <br />
            <input type="submit" class="btn btn-primary" value="Login!" />
        }
    </div>
    <div class="col-xs-6">
        <form id="registerForm" onsubmit="return validate()" method="post" action="/Account/RegisterAccount">
            <div class="row">
                <div class="col-xs-6">
                    <input type="text" class="form-control" name="firstname" tabindex="1" required placeholder="First Name..." />
                    <br />
                    <input id="password0" data-minlength="6" type="password" class="form-control" name="password" tabindex="3" min="6" required placeholder="Password..." />
                </div>
                <div class="col-xs-6">
                    <input type="text" class="form-control" name="lastname" tabindex="2" required placeholder="Last Name..." />
                    <br />
                    <input id="password1" data-match="#password0" type="password" class="form-control" name="password1" tabindex="4" required placeholder="Confirm Password..." />
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <br />
                    <input type="text" style="width: 100%; max-width: 100% !important;" class="form-control" name="username" tabindex="5" required placeholder="Username..." />
                    <br />
                    <input type="email" style="width: 100%; max-width: 100% !important;" class="form-control" name="email" tabindex="6" required placeholder="Email..." />
                </div>
            </div>
            <br />
            <input id="registerButton" type="submit" class="btn btn-primary" value="Register!" />
        </form>
    </div>
</div>

<script>
    function validate() {
        debugger;
        if ($('#password0').val() != $('#password1').val()) {
            document.getElementById("password1").setCustomValidity("These passwords don't match!");
        } else {
            document.getElementById("password1").setCustomValidity("");
        }
        return document.getElementById('password1').checkValidity();

    }
</script>

更新：

我刚刚发布了最新版本，它位于roconnor.somee.com/oas