无法在不显眼的验证失败时删除类答案

【问题标题】：Unable to remove class on unobtrusive validation fail无法在不显眼的验证失败时删除类
【发布时间】：2014-07-23 08:37:11
【问题描述】：

我想知道这里是否有人可以帮助我弄清楚为什么在验证失败时我无法从按钮中删除类。

在我们的登录页面上，当有人单击Login 按钮时，我正在添加一个类来为其提供加载动画。问题是验证失败时我无法删除它。

因此，例如，如果有人只是单击Login 并且用户名和密码字段都是空的，它将按预期弹出错误消息，但我需要删除加载动画并且我尝试过的所有内容似乎都没有工作。

这是我的 HTML：

  using (Html.BeginForm(ControllersAndActions.UsersController.LogIn, ControllersAndActions.UsersController.Name, FormMethod.Post, new {id="LoginForm"}))
    {
        @Html.AntiForgeryToken()
        <div class="loginArea">

            <div class="welcomeMessage">@Html.Translate(AccountsToken.AccessMessage)</div>

            @Html.TextBoxFor(x => x.Username, new {placeholder = AccountsToken.Username.Translate()}) 
            @Html.TextBoxFor(x => x.Password, new {placeholder = AccountsToken.Password.Translate(), type = "password"})
            <div class="loginError">
                @Html.ValidationSummary()
            </div>
            <div class="loginLostPassword">
                <a class="loginLostPasswordLink" href="@Url.Action(ControllersAndActions.UsersController.LostPassword, ControllersAndActions.UsersController.Name)">@Html.Translate(AccountsToken.ForgottenPasswordQM)</a>
            </div>
            <div class="loginLoginBut"><button type=submit class="loginButton butLogin">@Html.Translate(AccountsToken.LogIn)</button></div>
            <div class="loginRememberMe"><label class="rememberMeLabel">@Html.CheckBoxFor(x => x.RememberMe) @Html.Translate(AccountsToken.StoreAsACookieQM)</label></div>
        </div>

        if (Html.RegistrationsAllowed() != SiteRegistrationAllowed.DenySiteRegistration)
        {
            <div class="registrationArea">
                <div class="registrationMessage">@Html.DisplayTextPanel("[LoginRegistrationMessage]", IsAdmin ? "[Click edit to change this text]" : null)</div>
                <div class="registrationBut"><a class="loginButton butRegister" href="@Url.Action(ControllersAndActions.UsersController.Registration, ControllersAndActions.UsersController.Name)">@Html.Translate(AccountsToken.Register)</a></div>

            </div>
        }
    }

我目前的脚本如下：

 <script>
$(document).ready(function () {
    $.validator.setDefaults({
        invalidHandler: function (form, validator) {
            $(".butLogin").removeClass("butLoading");
        }
    });
});
$(function() {
    $(".butLogin").on("click", function () {
        $(this).addClass("butLoading");
    });

});

我没有高兴地尝试了以下问题的解决方案：

How to set an invalidHandler for all forms?

Using jQuery Validate's invalidHandler event

invalidHandler on next button with jQuery validation plugin

我昨天浪费了整个下午试图让这个工作，所以我非常感谢人们在这里提供的任何帮助或建议。希望我不只是愚蠢，因为我很确定这应该相对简单。

【问题讨论】：

标签： asp.net-mvc-4 razor unobtrusive-validation

【解决方案1】：

这样试试，

<script type="text/javascript">

$(function() {
    $(".butLogin").on("click", function () {
            $(this).addClass("butLoading");
            var validation = $("#LoginForm");
            if (!validation.valid()) {
            $(this).removeClass("butLoading"); 
            return false;
            }
    });

});
</script>

【讨论】：

谢谢，很快就会试一试
这很有魅力，非常感谢。我确定我昨天尝试了类似的方法，但无济于事。