Click here to Skip to main content
14,932,329 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
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?

What I have tried:

This is my View:
HTML
<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>


This is what is imported in my _layout:
HTML
 <!-- 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>


And this is my controller:
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);
            }
}
Posted
Comments
dnxit 10-Sep-20 2:35am
   
Why are you including Jquery related js files in your view ? same is added in your layout as well.
https://blog.michaelckennedy.net/2012/10/11/preventing-javascript-files-from-loading-multiple-times/
May be that's the problem
Steven8579 10-Sep-20 13:28pm
   
I put all of them in my _layout and i still have the same problem

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900