Какова наилучшая практика проверки на стороне клиента и сервера в asp. net mvc и bootstrap v4?

Question

Я работаю над приложением для опроса с Asp. Net MVC.

У меня есть страница с именем Index.cs html, в которой есть таблица вопросов и «Добавить новый» кнопка. После нажатия кнопки открывается всплывающее окно с jQuery. Я вызываю представление из контроллера, чтобы заполнить диалоговое окно jQuery с именем AddOrEdit.cs html (дочерняя страница). Я добавляю новый вопрос и варианты. Вопрос представляет собой текстовое поле и его параметры добавляются в редактируемую таблицу. После нажатия кнопки отправки запускается событие отправки формы (сохранение или обновление).

Bootstrap 4 Проверка не останавливает событие, а ajax вызов работает и отправляет запрос контроллеру. Как я могу настроить Bootstrap 4 форму проверки моих полей ввода? это источник, из которого я ссылаюсь. Пример проверки Где я ошибаюсь. Какой метод визуальной проверки является наилучшим.

Index.cs html

@{
 ViewBag.Title = "Soru Listesi";
}
<h2>Soru Oluşturma</h2>
<a class="btn btn-success" style="margin-bottom: 10px" onclick="PopupForm('@Url.Action("AddOrEdit","Question")')"><i class="fa fa-plus"></i> Yeni Soru Oluştur</a>
<table id="questionTable" class="table table-striped table-bordered accent-blue" style="width: 100%">
 <thead>
 <tr>
    <th>Soru No</th>
    <th>Soru Adı</th>
    <th>Oluşturma Tarihi</th>
    <th>Güncelleme Tarihi</th>
    <th>Güncelle/Sil</th>
 </tr>
 </thead>
 </table>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
 @section Scripts{
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<script>
var Popup, dataTable;
$(document).ready(function () {
    dataTable = $("#questionTable").DataTable({
        "ajax": {
            "url": "/Question/GetData",
            "type": "GET",
            "datatype": "json"
        },
        "columnDefs": [
            { targets: 2 }
        ],
        "scrollX": true,
        "scrollY": "auto",
        "columns": [
            { "data": "QuestionId" },
            { "data": "QuestionName" },
            {
                "data": "CreatedDate",
                "render": function (data) { return getDateString(data); }
            },
            {
                "data": "UpdatedDate",
                "render": function (data) { return getDateString(data); }
            },
            {
                "data": "QuestionId",
                "render": function (data) {
                    return "<a class='btn btn-primary btn-sm' onclick=PopupForm('@Url.Action("AddOrEdit", "Question")/" +
                        data +
                        "')><i class='fa fa-pencil'></i> Güncelle</a><a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" +
                        data +
                        ")><i class='fa fa-trash'></i> Sil</a>";
                },
                "orderable": false,
                "searchable": false,
                "width": "150px"
            }
        ],
        "language": {
            "emptyTable":
                "Soru bulunamadı, lütfen <b>Yeni Soru Oluştur</b> butonuna tıklayarak yeni soru oluşturunuz. "
        }
    });
});


function getDateString(date) {
    var dateObj = new Date(parseInt(date.substr(6)));
    let year = dateObj.getFullYear();
    let month = (1 + dateObj.getMonth()).toString().padStart(2, '0');
    let day = dateObj.getDate().toString().padStart(2, '0');
    return day + '/' + month + '/' + year;
};


function PopupForm(url) {
    var formDiv = $('<div/>');
    $.get(url)
        .done(function (response) {
            formDiv.html(response);
            Popup = formDiv.dialog({
                autoOpen: true,
                resizable: true,
                title: 'Soru Detay',
                modal: true,
                height: 'auto',
                width: '700',
                close: function () {
                    Popup.dialog('destroy').remove();
                }

            });
        });
}

function SubmitForm(form) {
    event.preventDefault();
    if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
    }
    form.classList.add('was-validated');

    var question = {};
    question.questionId = $('#QuestionId').val();
    question.questionName = $('#QuestionName').val();
    var options = new Array();
    $("#questionForm TBODY TR").each(function () {
        var row = $(this);
        var option = {};
        option.optionId = row.find("TD").eq(0).html();
        option.optionName = row.find("TD").eq(1).html();
        option.questionId = 0;
        option.isActive = true;
        option.status = true;
        options.push(option);
    });

    question.options = options;
    question.responses = new Array();
    $.ajax({
        type: "POST",
        url: form.action,
        data: JSON.stringify(question),
        contentType: "application/json",
        success: function (data) {
            if (data.success) {
                Popup.dialog('close');
                dataTable.ajax.reload();
                $.notify(data.message,
                    {
                        globalPosition: "top center",
                        className: "success",
                        showAnimation: "slideDown",
                        gap: 1000
                    });
            }
        },
        error: function (req, err) {
        },
        complete: function (data) {
        }
    });
}



function ResetForm(form) {
    Popup.dialog('close');
    return false;
}

function Delete(id) {
    if (confirm('Bu soruyu silmek istediğinizden emin misiniz?')) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("Delete", "Question")/' + id,
            success: function (data) {
                if (data.success) {
                    dataTable.ajax.reload();
                    $.notify(data.message,
                        {
                            className: "success",
                            globalPosition: "top center",
                            title: "BAŞARILI"
                        });
                }
            }

        });
    }
}

</script>
}

AddOrEdit.cs html

@using MerinosSurvey.Models
@model Questions
@{
Layout = null;
}

@using (Html.BeginForm("AddOrEdit", "Question", FormMethod.Post, new { @class = "needs-validation", novalidate = "true", onsubmit = "return SubmitForm(this)", onreset = "return ResetForm(this)", id = "questionForm" }))
{
 <div class="form-group row">
 @Html.Label("QuestionId", "Soru No", new { @class = "col-form-label col-md-3" })
 <div class="col-md-9">
    @Html.TextBoxFor(model => model.QuestionId, new { @readonly = "readonly", @class = "form-control" })

</div>
</div>
<div class="form-group row">
@Html.Label("QuestionName", "Soru Adı", new { @class = "col-form-label col-md-3" })
<div class="col-md-9">
    @Html.EditorFor(model => model.QuestionName, new { htmlAttributes = new { @class = "form-control", required = "true" } })
    <div class="valid-feedback"><i class="fa fa-check">Süpersin</i></div>
    <div class="invalid-feedback "><i class="fa fa-times">Soru adı zorunludur.</i></div>
</div>
</div>
<div class="table-wrapper form-group table-responsive-md">
<div class="table-title">
    <div class="form-group row">
        <div class="col-md-9">Seçenekler</div>
        <div class="col-md-3">
            <button type="button" class="btn btn-success add-new" style="margin-bottom: 10px"><i class="fa fa-plus"></i>Seçenek Ekle</button>
        </div>
    </div>
</div>
<table class="table optionTable">
    <thead>
        <tr>
            <th scope="col">Seçenek Id</th>
            <th scope="col">Seçenek Adı</th>
            <th scope="col">Güncelle/Sil</th>
        </tr>

    </thead>
    <tbody>
        @foreach (Options options in Model.Options)
            {
                <tr>
                    <td>@options.OptionId</td>
                    <td>@options.OptionName</td>
                    <td>
                        <a class="add btn btn-primary btn-sm" title="Add" data-toggle="tooltip"><i class="fa fa-check">Onayla</i></a>
                        <a class="edit btn btn-secondary btn-sm" title="Edit" data-toggle="tooltip"><i class="fa fa-pencil">Güncelle</i></a>
                        <a class="delete btn-danger btn-sm" title="Delete" data-toggle="tooltip"><i class="fa fa-trash">Sil</i></a>
                    </td>
                </tr>
            }
    </tbody>
</table>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-primary btnSubmit" style="margin-bottom: 10px"><i class="fa fa-save"></i>Kaydet</button>
<button type="reset" class="btn btn-secondary" style="margin-bottom: 10px" ><i class="fa fa-trash"> 
</i>İptal</button>

</div>
}
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
//var actions = $("table.optionTable td:last-child").html();

 var actions =
    ' <a class="add btn btn-primary btn-sm" title="Add" data-toggle="tooltip"><i class="fa fa-check">Onayla</i></a>' +
    '<a class="edit btn btn-secondary btn-sm" title="Edit" data-toggle="tooltip"><i class="fa fa-pencil">Güncelle</i></a>' +
    '<a class="delete btn-danger btn-sm" title="Delete" data-toggle="tooltip"><i class="fa fa-trash">Sil</i></a>';

 // Append table with add row form on add new button click
 $(".add-new").click(function () {
    debugger;
    $(this).attr("disabled", "disabled");
    $(".btnSubmit").attr("disabled", "disabled");
    var index = $("table.optionTable tbody tr:last-child").index();
    var row = '<tr>' +
        '<td>0</td>' +
        '<td><input type="text" class="form-control" name="optionName" id="optionName"></td>' +
        '<td>' + actions + '</td>' +
    '</tr>';
    $("table.optionTable").append(row);
    $("table.optionTable tbody tr").eq(index + 1).find(".add, .edit").toggle();
    $('[data-toggle="tooltip"]').tooltip();
});

// Add row on add button click
$(document).on("click", ".add", function () {
    var empty = false;
    var input = $(this).parents("tr").find('input[type="text"]');
    input.each(function () {
        if (!$(this).val().trim()) {
            $(this).addClass("error");
            empty = true;
        } else {
            $(this).removeClass("error");
        }
    });
    $(this).parents("tr").find(".error").first().focus();
    if (!empty) {
        input.each(function () {
            $(this).parent("td").html($(this).val().trim());
        });
        $(this).parents("tr").find(".add, .edit").toggle();
        $(".add-new").removeAttr("disabled");
        $(".btnSubmit").removeAttr("disabled");

    }
 });

 // Edit row on edit button click
 $(document).on("click", ".edit", function () {

    /*td: nth - child(2)*/
    /*$(this).parents("tr").find("td:not(:last-child)").each(function () {*/
    $(this).parents("tr").find("td:nth-child(2)").each(function () {
        $(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
    });
    $(this).parents("tr").find(".add, .edit").toggle();
    $(".add-new").attr("disabled", "disabled");
    $(".btnSubmit").attr("disabled", "disabled");
});



 // Delete row on delete button click
 $(document).on("click", ".delete", function () {
    debugger;
    $(this).parents("tr").remove();
    $(".add-new").removeAttr("disabled");

    var rowCount = $('table.optionTable tbody tr').length;
    if (rowCount > 0) {
        $(".btnSubmit").removeAttr("disabled");
    } else {
        $(".btnSubmit").attr("disabled", "disabled");
    }

 });
});