验证问题 - 单击提交按钮会更改焦点，直到第二次单击才会提交

Question

这是我正在使用的相关代码：

查看

<div id="PasswordExpired">
    @using (Html.BeginForm("ChangeExpiredPassword", "Home", FormMethod.Post, new { id =     "PasswordExpiredForm", name = "PasswordExpiredForm"}))
    { 
        @*AJAX modal content loaded here*@
    }
</div>

表格

<div class="modal fade" id="PasswordExpiredModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
    <div id="PasswordExpiredModalContent" class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title error-text">Password Expired</h4>
            <p>The password for this account has expired, please create a new password</p>
            <div id="processingError"></div>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <div class="error">@Html.ValidationMessageFor(model => model.LoginEmail)</div>
                @Html.LabelFor(model => model.LoginEmail)
                @Html.TextBoxFor(model => model.LoginEmail, new { @class = "form-control", placeholder = "Email Address", type = "text", maxlength = "55" })
            </div>
            <div class="form-group">
                <div class="error">@Html.ValidationMessageFor(model => model.CurrentPassword)</div>
                @Html.LabelFor(model => model.CurrentPassword)
                @Html.TextBoxFor(model => model.CurrentPassword, new { @class = "form-control", type = "password", maxlength = "55" })
            </div>
            <div class="form-group">
                <div class="error">@Html.ValidationMessageFor(model => model.NewPassword)</div>
                @Html.LabelFor(model => model.NewPassword)

                @if (utility.Overrides.HasType(UtilityOverrideType.PasswordComplexity))
                {
                    string messageAndRegEx = utility.Overrides.GetArgument(UtilityOverrideType.PasswordComplexity);
                    int pipePosition = messageAndRegEx.IndexOf("|");
                    string errorMessage = messageAndRegEx.Substring(0, pipePosition);
                    @Html.TextBoxFor(model => model.NewPassword, new { @class = "form-control", placeholder = errorMessage, type = "password", maxlength = "55" })
                }
                else
                {
                    @Html.TextBoxFor(model => model.NewPassword, new { @class = "form-control", placeholder = "6 or more characters/case sensitive", type = "password", maxlength = "55" })
                }
            </div>
            <div class="form-group">
                <div class="error">@Html.ValidationMessageFor(model => model.ConfirmNewPassword)</div>
                @Html.LabelFor(model => model.ConfirmNewPassword)
                @Html.TextBoxFor(model => model.ConfirmNewPassword, new { @class = "form-control", type = "password", maxlength = "55" })
            </div>
        </div>
        <div class="modal-footer">
            <div class="btnWrap">
                <a id="ChangePassword" href="#" class="genericBtn">Change Password</a>
            </div>
        </div>
    </div>
</div>

Javascript

<script type="text/javascript">
    var someVar = someVar || {};
    someVar.home = (function(module, $) {
        module.launchModal = function () {
            $('#PasswordExpiredModal').modal('hide');
            $('#PasswordExpiredModal').modal({
                show: true,
                backdrop: 'static'
            });
            $('#ChangePassword').on('click', function() {
                var form = $('#PasswordExpiredForm');
                form.validate();

                processAjax({ 'url': '/Home/ChangeExpiredPassword', 'data': $(this).closest('form').serialize() });
            });
        }
        return module;
    }( someVar.home || {}, jQuery));
</script>

当我以某些顺序测试验证时，单击提交按钮无法提交，而是从刚刚填充的字段中移除焦点并将其放在按钮上。大多数情况下，单击按钮会正确提交。我一生都想不通如何让它在单击按钮时尝试提交。

编辑：看起来如果一个字段因为它是空白而出错，然后您填充该字段并提交。通过单击提交，焦点离开该字段并且错误消失。然后您可以提交。

Answer 1

代替

$('#ChangePassword').on('click', function() {
    var form = $('#PasswordExpiredForm');
    form.validate();

    processAjax({ 'url': '/Home/ChangeExpiredPassword', 'data': $(this).closest('form').serialize() });
});

试试

$("#PasswordExpiredForm").validate({
    submitHandler: function(form) {
        processAjax({ 'url': '/Home/ChangeExpiredPassword', 'data': $(form).serialize() });
    }
});

有 <button id="ChangePassword" class="genericBtn">Change Password</button>

您可能还需要考虑这样一种可能性，即当验证元素可见时，往往会将表单底部的提交按钮向下移动验证元素的高度。这可能会导致单击按钮时出现问题。