Bootstrap boot boot text ONLY if client-side validation passes

Question

I have a form with two data fields. Everyone has a quick client-side validation check. Then the submit button appears:

@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..." /> } 

I currently have:

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

Which changes the button for loading text when submitting the form. However, it does this even if client-side validation fails, forcing it to remain in a “load” state indefinitely because the page does not reload.

I am looking for a way to only call $('#register-btn').button('loading'); when the form is actually submitted to the server and the page is guaranteed to be refreshed.

Answer 1

What about calling the valid() method before setting the text?

Sort of:

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

Answer 2

You can check if the form is validated with valid() . If the form is valid, you can change the text.

 var form = $('#formId'); form.validate(); form.find('[type="submit"]').on('click', function(e){ e.preventDefault(); if ( form.valid() ) { form.find('[type="submit"]').button('loading'); } });