Popup dialog form behaves different than it's source: Edit view

Question

My Index view is a representation of a table in the database. Each row has Edit button which shows Edit view displayed in a popup dialog using jQuery. My model for this table has some validations and if I provide wrong values in the Edit view it shows Error Messages and allows me to correct mistakes.

When I'm opening Edit view throug the button, meaning in a popup dialog. After inputting incorrect values it shows me the errors (although one error is different color than the others, no idea why) but it doesn't allow me to select new values, it looks like form in a popup dialog is flickering or refreshing.

I don't want to copy all my code so I will just share what I think might be the problem, those are scripts that create popup dialog:

<script>
var Popup;
$(document).ready(function () {
    $('#table').DataTable();
});

function PopupForm(url) {
    var formDiv = $('<div/>');
    $.get(url)

        .done(function (response) {
            formDiv.html(response);
            Popup = formDiv.dialog({
                autoOpen: true,
                dialogClass: 'zPosition',
                resizable: false,
                title: 'Fill details',
                position: { my: "center top", at: "center top+5%", of: window },
                height: 750,
                width: 700,
                // modal ensures only one dialog window open
                //modal: true,
                close: function () {
                    Popup.dialog('destroy').remove();
                }
            });
        });
};
function LoadCursor() {
    $('*').css('cursor', 'wait');
};
function SubmitForm(form) {
    $('body').css('cursor', 'wait');

    $.ajax({
        type: "POST",
        url: form.action,
        data: $(form).serialize(),
        success: function (data) {
            if (data.success) {
                Popup.dialog('close');
                location.reload(true);
            }
            else {
                Popup.html(data);
                SubmitForm(form);
            }
        },
    complete: function () {
            $('body').css('cursor', 'default');
        }
    });
    return false;
};

</script>

Controller:

[HttpPost]
    public ActionResult Edit([Bind(Include = "Id,Country,Name")] Person person)
    {
            ViewBag.Country = new SelectList(db.Countries, "Id", "CountryName", person.Country);
        if (ModelState.IsValid)
        {
                db.Entry(person).State = EntityState.Modified;
                db.SaveChanges();
                return Json(new { success = true, message = "Updated Successfully" }, JsonRequestBehavior.AllowGet);
        }
        return View(person);
    }

What could cause a problem that in normal Edit view everything works but in a popup dialog form it flickers, doesn't allow me to change mistakes?

I'm not providing whole controllers, views, models because everything works in a normal Edit view, only in a popup dialog the Edit view isn't working properly. If anything more is needed I will provide.

I'm using following scripts:

<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script src="~/Datatables/DataTables-1.10.18/js/jquery.dataTables.js"></script>
<script src="~/Datatables/DataTables-1.10.18/js/dataTables.bootstrap4.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/expressive.annotations.validate.js"></script>

Answer 1

Kinda stupid but my SubmitForm function executes SubmitForm function on fail.