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

在提交表单时，会更改按钮以加载文本。但是，即使客户端验证失败，它也会执行此操作，从而使其保持在“＃34; loading＆＃34;无限期地陈述，因为页面没有重新加载。

我正在寻找一种让它只在表单实际提交到服务器时调用$('#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');
    }
});

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

2 个答案: