validation in bootstrap and asp.net mvc5

Question

I have a bootstrap template and want to use it in my asp.net mvc 5 project. in _layout page I have these codes :

      <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
    <!-- BEGIN CORE PLUGINS -->
    <!--[if lt IE 9]>
    <script src="../../Template/metronic/assets/global/plugins/respond.min.js"></script>
    <script src="../../Template/metronic/assets/global/plugins/excanvas.min.js"></script>
    <![endif]-->
    <script src="../../Template/metronic/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
    <script src="../../Template/metronic/assets/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
    <script src="../../Template/metronic/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
    <!-- END CORE PLUGINS -->
@RenderSection("FEATURED", true)
    <script>
        jQuery(document).ready(function () {
            Metronic.init(); // init metronic core componets
            Layout.init(); // init layout
            QuickSidebar.init() // init quick sidebar
            Index.init();
            Index.initDashboardDaterange();
            Index.initJQVMAP(); // init index page's custom scripts
            Index.initCalendar(); // init index page's custom scripts
            Index.initCharts(); // init index page's custom scripts
            Index.initChat();
            Index.initMiniCharts();
            Index.initIntro();
            Tasks.initDashboardWidget();
        });
    </script>
    <!-- END JAVASCRIPTS -->

and for section named feature I have these code in child page

<!-- END PAGE CONTENT-->
@section featured{
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/jquery-validation/js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/jquery-validation/js/additional-methods.min.js"></script>
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/select2/select2.min.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="../../../../Template/metronic/assets/global/scripts/metronic.js" type="text/javascript"></script>
    <script src="../../../../Template/metronic/assets/admin/layout/scripts/layout.js" type="text/javascript"></script>
    <script src="../../../../Template/metronic/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script>
    <script src="../../../../Template/metronic/assets/admin/pages/scripts/form-wizard.js"></script>
    <!-- END PAGE LEVEL SCRIPTS -->
    <script>
        jQuery(document).ready(function () {
            // initiate layout and plugins
            FormWizard.init();
        });
    </script>
    <!-- END JAVASCRIPTS -->}

In child page I create a wizard form to get user information and there is a form like this :

                            <form action="#" class="form-horizontal" id="submit_form" method="POST">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">Username <span class="required">
                                                    * </span>
                                                    </label>
                                                    <div class="col-md-4">
                                                        <input type="text" class="form-control" name="username"/>
                                                        <span class="help-block">
                                                        Provide your username </span>
                                                    </div>
                                                </div>
</form>

client validation works best but when I change input to razor input validation didn't work

                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        Username <span class="required">
                                                            *
                                                        </span>
                                                    </label>
                                                    <div class="col-md-8">
                                                        @Html.TextBoxFor(model => model.karkonan.Name, new { @class = "form-control" })
                                                        @Html.ValidationMessageFor(model => model.karkonan.Name)
<span class="help-block">
                                                            Provide your username
                                                        </span>
                                                    </div>
                                                </div>

in form-wizard.js , I want to add code to define rules to validate karkonan.Name but it's name is invalid for javascript.

username: {
                        minlength: 5,
                        required: true
                    }
karkonan.Name: {
                        minlength: 5,
                        required: true
                    }

and when I replaced form tag with this :

@using (Html.BeginForm("create", "karmand", FormMethod.Post, new { @class="form-horizontal",@id="submit_form"}))
                {
                    @Html.AntiForgeryToken()

none validation work when I pass to other wizard steps.

Answer 1

With MVC and razor, when you use something like @Html.For, your validation needs to go against your server side C# model in the form of attributes.

So the property 'Name' on 'karkonan' (C# class name should start upper case) needs to have a '[Required]' attribute for example. MVC will put client side validation attributes into the generated html (which in turn will use jquery unobtrusive validation on the client. Within your controller on the server, you want to check for a valid model state as well).

You could wire up some client side validation of your own, if you inspect the html of the razor generated input, the elements will get meaningful id's, but it's probably easier to use what's built in.