javascript - 仅在客户端验证通过时 Bootstrap 数据加载文本

Question

我有一个包含几个数据字段的表单。每个都有一个快速的客户端验证检查。然后有一个提交按钮:

@using (Html.BeginForm("ImportApi", "EveApi", FormMethod.Post, new { id = "register-form" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <ol>
        <li>
            @Html.LabelFor(m => m.KeyId)
            @Html.TextBoxFor(m => m.KeyId)
            @Html.ValidationMessageFor(m => m.KeyId)
        </li>
        <li>
            @Html.LabelFor(m => m.vCode)
            @Html.TextBoxFor(m => m.vCode)
            @Html.ValidationMessageFor(m => m.vCode)
        </li>
    </ol>
    <input type="submit" id="register-btn" value="Register" data-loading-text="Loading..." />
}

我目前有:

$('#register-form').submit(function () {
    $('#register-btn').button('loading');
    return true;
});

提交表单时将按钮更改为加载文本。但是，即使客户端验证失败，它也会这样做，导致它无限期地保持在“正在加载”状态，因为页面没有重新加载。

我正在寻找一种方法，让它只在表单实际提交到服务器时调用 $('#register-btn').button('loading'); 并且页面保证刷新。

Answer 1

在设置文本之前调用valid()方法怎么样？

类似于:

$('#register-form').submit(function () {
   if($(this).valid()) {
     $('#register-btn').button('loading');
     return true;
   }
});