仅当客户端验证通过时启动数据加载文本

Bootstrap data-loading-text ONLY if client-side validation passes

本文关键字：启动 数据 加载 文本 过时 客户端 验证      更新时间：2023-09-26

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

@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');。

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

类似于：

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

您可以检查表单是否使用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');
    }
});
相关文章：