Как получить ошибки проверки для автоматического удаления .NET MVC5

---

I am having an issue with my validation with my .Net MVC5 form. When I submit my form I get the validation summary as well as the validation messages under each field that's invalid. The problem is when I start entering information into the fields, the errors don't go away like they're supposed to. I included jquery validation min underneath my form as well as jquery validation unobtrusive min but it still doesn't work for me. I can't figure out why the errors don't go away when I fix the validation errors. Also, each time my form loads it displays Please fix errors before submitting the form: in red. The errors only go away when I click submit. Maybe this has something to do with my javascript on the view page?

Что я уже пробовал:

Это моя точка зрения:

<h2>Add</h2>

<script type="text/javascript"

        src="//code.jquery.com/jquery-compat-git.js"></script>

<link href="~/Content/css/result-light.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<style id="compiled-css" type="text/css">

    body {
        font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    html {
        font-size: 100% !important;
    }

    .col-xs-3 {
        width: 25% !important;
    }

    .stepwizard-step p {
        margin-top: 0px;
        color: #666;
    }

    .stepwizard-row {
        display: table-row;
    }

    .stepwizard {
        display: table;
        width: 100%;
        position: relative;
    }

    .stepwizard-step button[disabled] {
        /*opacity: 1 !important;
        filter: alpha(opacity=100) !important;*/
    }

    .stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard fieldset[disabled] .btn {
        opacity: 1 !important;
        color: #bbb;
    }

    .stepwizard-row:before {
        top: 14px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 100%;
        height: 1px;
        background-color: #ccc;
        z-index: 0;
    }

    .stepwizard-step {
        display: table-cell;
        text-align: center;
        position: relative;
    }

    .btn-circle {
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.428571429;
        border-radius: 15px;
    }

    .StripeElement {
        box-sizing: border-box;
        height: 40px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 4px;
        background-color: white;
        box-shadow: 0 1px 3px 0 #e6ebf1;
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
    }

    .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .StripeElement--invalid {
        border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
    }

    .green {
        border: solid green 1px;
    }

    .error {
        border: solid red 1px;
    }

    .select2-container--default .select2-selection--single {
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
    }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 1.428571429 !important;
            padding: 6px 12px !important;
        }

    .select2-container .select2-selection--single {
        height: 34px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        margin-top: 0;
    }

    /* EOS */
</style>

<script id="insert"></script>




<div class="container">
    <div class="stepwizard">
        <div class="stepwizard-row setup-panel">
            <div class="stepwizard-step col-xs-3">
                <a href="#step-1" type="button" class="btn btn-success btn-circle">1</a>
                <p><small>Personal Information</small></p>
            </div>
            <div class="stepwizard-step col-xs-3">
                <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
                <p><small>Security</small></p>
            </div>
            <div class="stepwizard-step col-xs-3">
                <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
                <p><small>Church Affiliation</small></p>
            </div>
            <div class="stepwizard-step col-xs-3">
                <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">4</a>
                <p><small>Payment</small></p>
            </div>
        </div>
    </div>

    @using (Html.BeginForm("Create", "Login", new { @id = string.Empty }, FormMethod.Post, new { @id = "payment-form" }))
    {
        @Html.AntiForgeryToken()



        <div class="panel panel-primary setup-content" id="step-1">
            <div class="panel-heading">
                <h3 class="panel-title">Personal Information</h3>
            </div>
            <div class="panel-body">
                @Html.ValidationSummary(false, "Please fix errors before submitting the form:", new { @class = "text-danger" })
                <div class="row">
                    <div class="form-group col-md-6">
                        <label class="control-label">First Name</label>
                        @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @id = "firstName", @class = "form-control", @placeholder = "Enter First Name" } })
                        @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                    </div>

                    <div class="form-group col-md-6">
                        <label class="control-label">Last Name</label>
                        @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @id = "lastName", @class = "form-control", @placeholder = "Enter Last Name" } })
                        @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Company</label>
                        @Html.EditorFor(model => model.logins.Company, new { htmlAttributes = new { @id = "company", @class = "form-control", @placeholder = "Company" } })
                        @Html.ValidationMessageFor(model => model.logins.Company, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">E-mail</label>
                        @Html.EditorFor(model => model.logins.UserName, new { htmlAttributes = new { @id = "email", @class = "form-control", @placeholder = "E-mail" } })
                        @Html.ValidationMessageFor(model => model.logins.UserName, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Address</label>
                        @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @id = "address", @class = "form-control", @placeholder = "Address" } })
                        @Html.ValidationMessageFor(model => model.logins.Address, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Address 2</label>
                        @Html.EditorFor(model => model.Address2, new { htmlAttributes = new { @id = "address2", @class = "form-control", @placeholder = "Address2" } })
                        @Html.ValidationMessageFor(model => model.Address2, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-4">
                        <label class="control-label">City</label>
                        @Html.EditorFor(model => model.logins.City, new { htmlAttributes = new { @id = "city", @class = "form-control", @placeholder = "City" } })
                        @Html.ValidationMessageFor(model => model.logins.City, "", new { @class = "text-danger" })
                    </div>
                    
                    </div>
                    <div class="form-group col-md-4">
                        <label class="control-label">Zip</label>
                        @Html.EditorFor(model => model.logins.Zip, new { htmlAttributes = new { @id = "zip", @class = "form-control", @placeholder = "Zip" } })
                        @Html.ValidationMessageFor(model => model.logins.Zip, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Phone</label>
                        @Html.EditorFor(model => model.logins.Phone, new { htmlAttributes = new { @id = "phone", @type = "tel", @class = "form-control", @placeholder = "Phone" } })
                        @Html.ValidationMessageFor(model => model.logins.Phone, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Cell Phone</label>
                        @Html.EditorFor(model => model.logins.CellPhone, new { htmlAttributes = new { @id = "cell", @type = "tel", @class = "form-control", @placeholder = "Cell Phone" } })
                        @Html.ValidationMessageFor(model => model.logins.CellPhone, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Musician Type 1</label>

                        @Html.DropDownListFor(model => model.musicianTypes, new SelectList(Model.musicianTypes, "id", "TypeName"), "None", new { @id = "musicianType1", @class = "form-control" })
                        <small class="form-text"></small>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Musician Type 2</label>
                        @Html.DropDownListFor(model => model.musicianTypes, new SelectList(Model.musicianTypes, "id", "TypeName"), "None", new { @id = "musicianType2", @class = "form-control" })
                        <small class="form-text"></small>
                    </div>
                </div>

                <button class="btn btn-primary nextBtn pull-right" type="button">Next</button>


            </div>
        </div>
        <div class="panel panel-primary setup-content" id="step-2">
            <div class="panel-heading">
                <h3 class="panel-title">Account Security</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Password</label>
                        @Html.EditorFor(model => model.logins.Password, new { htmlAttributes = new { @id = "password", @type = "password", @class = "form-control", @placeholder = "Password" } })
                        @Html.ValidationMessageFor(model => model.logins.Password, "", new { @class = "text-danger" })
                        <ul class="form-text text-muted">
                            <li>Must be 8-20 characters long</li>
                            <li>Must contain at least 1 number</li>
                            <li>Must contain at least 1 uppercase letter</li>
                            <li>Must contain at least 1 lowercase letter </li>
                            <li>Must contain a special character (e.g. ! ; # * %)</li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Confirm Password</label>
                        @Html.EditorFor(model => model.ConfirmPassword, new { htmlAttributes = new { @id = "cnfPassword", @type = "password", @class = "form-control", @placeholder = "Confirm Password" } })
                        @Html.ValidationMessageFor(model => model.ConfirmPassword, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Security Question</label>
                        @Html.DropDownListFor(model => model.chlist, new SelectList(Model.seclist, "id", "Question"), "Select", new { @id = "securityQuestion", @class = "form-control" })
                        <small class="form-text"></small>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Security Answer</label>
                        @Html.EditorFor(model => model.logins.SecretAnswer, new { htmlAttributes = new { @id = "answer", @type = "text", @class = "form-control", @placeholder = "Security Question Answer" } })
                        @Html.ValidationMessageFor(model => model.logins.SecretAnswer, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Account PIN</label>
                        @Html.EditorFor(model => model.logins.AccountPasscode, new { htmlAttributes = new { @id = "pin", @maxlength = "6", @type = "password", @class = "form-control", @placeholder = "Pin" } })
                        @Html.ValidationMessageFor(model => model.logins.AccountPasscode, "", new { @class = "text-danger" })
                        <small class="form-text"></small>
                    </div>
                </div>
                <button class="btn btn-primary nextBtn pull-right" type="button">Next</button>

            </div>
        </div>
        <div class="panel panel-primary setup-content" id="step-3">
            <div class="panel-heading">
                <h3 class="panel-title">Church Affiliation</h3>
            </div>
            <div class="panel-body">

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Church Affiliation 1</label><br />
                        @Html.DropDownListFor(model => model.chlist, new SelectList(Model.chlist, "id", "ChurchName"), "None", new { @id = "churchAffiliation1", @class = "select2 form-control", @style = "width:100%" })

                        <small class="form-text"></small>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Church Affiliation 2</label><br />
                        @Html.DropDownListFor(model => model.chlist, new SelectList(Model.chlist, "id", "ChurchName"), "None", new { @id = "churchAffiliation2", @class = "select2 form-control", @style = "width:100%" })
                        <small class="form-text"></small>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Church Affiliation 1</label><br />
                        @Html.DropDownListFor(model => model.chlist, new SelectList(Model.chlist, "id", "ChurchName"), "None", new { @id = "churchAffiliation3", @class = "select2 form-control", @style = "width:100%" })

                        <small class="form-text"></small>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Church Affiliation 4</label><br />
                        @Html.DropDownListFor(model => model.chlist, new SelectList(Model.chlist, "id", "ChurchName"), "None", new { @id = "churchAffiliation4", @class = "select2 form-control", @style = "width:100%" })
                        <small class="form-text"></small>
                    </div>
                </div>
                <button class="btn btn-primary nextBtn pull-right" type="button">Next</button>
            </div>

        </div>

        <div class="panel panel-primary setup-content" id="step-4">
            <div class="panel-heading">
                <h3 class="panel-title">Payment</h3>
            </div>
            <div class="panel-body">

                <div class="form-group">
                    <label for="cardName">Name on Card</label>
                    @Html.EditorFor(model => model.logins.Name, new { htmlAttributes = new { @id = "cardName", @class = "form-control", @placeholder = "Name On Card" } })
                    @Html.ValidationMessageFor(model => model.logins.Name, "", new { @class = "text-danger" })
                </div>

                <row>
                    <div class="form-group">
                        <label for="plan" class="control-label">Select a Plan</label><br />
                        @Html.DropDownListFor(model => model.subscriptionTypes, new SelectList(Model.subscriptionTypes, "id", "SubscriptionType1"), "None", new { @id = "plan", @class = "form-control" })

                    </div>

                    <div class="form-group">
                        <label for="card-number">
                            Credit or debit card
                        </label>
                        <div id="card-number">
                            <!-- A Stripe Element will be inserted here. -->
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="card-vc">
                                    CVC
                                </label>
                                <div id="card-cvc">
                                    <!-- A Stripe Element will be inserted here. -->
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="card-expiration">
                                    Exp
                                </label>
                                <div id="card-expiration">
                                    <!-- A Stripe Element will be inserted here. -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Used to display form errors. -->
                    <div id="card-errors" role="alert"></div>


                    <div class="form-group">
                        <button class="form-control btn btn-primary" type="submit">Submit Payment</button>
                    </div>
            </div>
        </div>
    }
</div>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>






<script type="text/javascript">



    $(document).ready(function () {

        var navListItems = $('div.setup-panel div a'),
            allWells = $('.setup-content'),
            allNextBtn = $('.nextBtn');

        allWells.hide();

        navListItems.click(function (e) {
            e.preventDefault();
            var $target = $($(this).attr('href')),
                $item = $(this);

            if (!$item.hasClass('disabled')) {
                navListItems.removeClass('btn-success').addClass('btn-default');
                $item.addClass('btn-success');
                allWells.hide();
                $target.show();
                $target.find('input:eq(0)').focus();
            }
        });

        allNextBtn.click(function () {
            var curStep = $(this).closest(".setup-content"),
                curStepBtn = curStep.attr("id"),
                nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                curInputs = curStep.find("input, select"),
                isValid = true;

            $(".form-group").removeClass("has-error");
            for (var i = 0; i < curInputs.length; i++) {
                if (!curInputs[i].validity.valid) {
                    isValid = false;
                    $(curInputs[i]).closest(".form-group").addClass("has-error");
                }
            }

            if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
        });

        $('div.setup-panel div a.btn-success').trigger('click');
    });


</script>

<script>
    $('.select2').select2();
</script>

Это то, что импортируется в my _layout:

 <!-- Bootstrap core JavaScript-->
    <script src="~/Content/AdminTemplate/vendor/jquery/jquery.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Content/AdminTemplate/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="~/Content/AdminTemplate/vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="~/Content/AdminTemplate/js/sb-admin-2.min.js"></script>

    <!-- Page level plugins -->
    <script src="~/Content/AdminTemplate/vendor/chart.js/Chart.min.js"></script>

    <!-- Page level custom scripts -->
    <script src="~/Content/AdminTemplate/js/demo/chart-area-demo.js"></script>
    <script src="~/Content/AdminTemplate/js/demo/chart-pie-demo.js"></script>

    <!-- Page level plugins -->
    <script src="~/Content/AdminTemplate/vendor/datatables/jquery.dataTables.min.js"></script>
    <script src="~/Content/AdminTemplate/vendor/datatables/dataTables.bootstrap4.min.js"></script>

    <!-- Page level custom scripts -->
    <script src="~/Content/AdminTemplate/js/demo/datatables-demo.js"></script>

    @RenderSection("stripe", required: false)
</body>
</html>

А это мой контроллер:

public ActionResult Create()
            {
            if (string.IsNullOrEmpty(Convert.ToString(Session["UserName"])))
            {
                return RedirectToAction("Login", "Home");
            }
            /* var mymodel = new LoginSecurityQuestionsViewModel();
             mymodel.logins = db.logins.ToList();
             ViewBag.securityquestions = db.secretquestions.ToList();
             ViewBag.churches = db.churches.ToList();
             ViewBag.subscriptionTypes = db.subscriptiontypes.ToList();
             ViewBag.musicianTypes = db.musiciantypes.ToList();
             return View(mymodel);*/
            LoginSecurityQuestionsViewModel multi_Dropdownlist = new LoginSecurityQuestionsViewModel
            {

                seclist = GetSecurityQuestionList(),
                chlist = GetChurchList(),
                subscriptionTypes = GetSubscriptionTypes(),
                musicianTypes = GetMusicianTypes()



            };
            return View(multi_Dropdownlist);
        }

        // POST: login/Create
        // To protect from overposting attacks, enable the specific properties you want to bind to, for 
        // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        public ActionResult Create(ChargeDTO chargeDto)
        {

            if (ModelState.IsValid == false)
            {
                LoginSecurityQuestionsViewModel multi_Dropdownlist = new LoginSecurityQuestionsViewModel
                {

                    seclist = GetSecurityQuestionList(),
                    chlist = GetChurchList(),
                    subscriptionTypes = GetSubscriptionTypes(),
                    musicianTypes = GetMusicianTypes()

                };
                return View(multi_Dropdownlist);
            }
}

---