I am using ASP.NET MVC 5 in combination with the client-side validation and forms in modal dialogs loaded via AJAX.
This all works fine, BUT if I open and post a lot of these dialogs/forms without reloading the page each submit gets slower and slower, because of (at least I think) the validation is still trying to validate all the past forms, and this takes some time. I come to that conclusion because I have a "Loading..." indicator which appears as soon as the submit begins and the time between clicking submit until the indicator is showing up is increasing from submit to submit.
Is there a way to completely reinitialize the client-side validation to avoid this problem?
I already searched a lot, but with all the terms I could imagine I only found solutions to clear/reinitialize the "one form" on screen...
I do not use any special code, just default MVC forms (simplified):
@model MyModel
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post,
new { id = "MyForm", enctype = "multipart/form-data" }))
{
@Html.EditorFor(m => m.MyValue)
@Html.ValidationMessageFor(m => m.MyValue)
<input type="submit" class="my-class" value="@Resources.Submit" />
}
<script type="text/javascript">
$(document).ready(function() {
$('#MyForm').submit(function(e) {
e.preventDefault();
if ($('#MyForm').valid()) {
var formValues = $('#MyForm').serialize();
$.post("@Url.Action("MyAction", "MyController")", formValues, function (result) {
if (result.startsWith("OK")) {
formValueHasChanged = false;
closeOverlay();
} else {
alert(result);
}
});
}
});
});
</script>
With a model like:
public class MyModel
{
[Required(ErrorMessageResourceName = nameof(RequiredAttribute), ErrorMessageResourceType = typeof(Resources.Content))]
public string MyValue { get; set; }
}
And such forms are loaded multiple times on the same page, as it is the edit-dialog for list items and it is opened once for each item edited.
UPDATE: I now did some profiling using Chrome DevTools to confim its the validation causing the lags:
.each()
so you can do all forms at once?$('form').each(function() { $(this).....