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

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;
   }
});

Answer 2

您可以检查表单是否已使用valid(). 如果表单有效，您可以更改文本。

var form = $('#formId');
form.validate();

form.find('[type="submit"]').on('click', function(e){
    e.preventDefault();

    if ( form.valid() ) {
        form.find('[type="submit"]').button('loading');
    }
});