ASP.NET MVC 5 Form Validation using jQuery and Bootstrap without Model class

[KGComputers]

Hi all,

The steps below illustrate on how to validate an MVC form using
jQuery and Bootstrap without a model class. I already have a C# version
for this application.


Create an ASP.NET MVC 5 Project in VB.NET and add codes for each file.


1. controllers\HomeController.vb

   Public Class HomeController
    Inherits System.Web.Mvc.Controller


    Function Index() As ActionResult
        Return View()
    End Function


    <HttpPost>
    Function Index(form As FormCollection) As ActionResult


        ' replace with database operation. for now using a registration success view.
        If form IsNot Nothing Then
            Return RedirectToAction("RegistrationSuccess")
        End If


        Return View()


    End Function


    <HttpPost>
    Function EmailExists(email As String) As JsonResult


        ' replace sample code with database checking of email.
        ' check existing email
        Return Json(Not String.Equals(email, "testing@mail.ph", StringComparison.OrdinalIgnoreCase))
    End Function


    Function RegistrationSuccess() As ActionResult
        Return View()
    End Function
   End Class

2. views\home\Index.vbhtml (HTML Markup)

   <div class="container">
        <div class="row">
            @Html.AntiForgeryToken()
            @Using Html.BeginForm("Index", "Home", FormMethod.Post, New With {.id = "frmInput", .class = "form-horizontal"})
                @<div class="form-group has-feedback">
                    <label for="fname" class="control-label col-md-3">First Name:</label>
                    <div class="col-md-9">
                        <input type="text" name="fname" id="fname" class="form-control" placeholder="Enter first name" />
                        <span class="glyphicon form-control-feedback" id="fname1"/>
                    </div>
                </div>            
                @<div class="form-group has-feedback">
                    <label for="mname" class="control-label col-md-3">Middle Name:</label>
                    <div class="col-md-9">
                        <input type="text" name="mname" id="mname" class="form-control" placeholder="Enter middle name" />
                        <span class="glyphicon form-control-feedback" id="mname1"></span>
                    </div>
                </div>
                @<div class="form-group has-feedback">
                    <label for="lname" class="control-label col-md-3">Last Name:</label>
                    <div class="col-md-9">
                        <input type="text" name="lname" id="lname" class="form-control" placeholder="Enter last name" />
                        <span class="glyphicon form-control-feedback" id="lname1"></span>
                    </div>
                </div>
                @<div class="form-group has-feedback">
                    <label for="email" class="control-label col-md-3">Email Address:</label>
                    <div class="col-md-9">
                        <input type="email" name="email" id="email" class="form-control" placeholder="Enter email" />
                        <span class="glyphicon form-control-feedback" id="email1"></span>
                    </div>
                </div>
                @<div class="form-group has-feedback">
                    <label for="password" class="control-label col-md-3">Password:</label>
                    <div class="col-md-9">
                        <input type="password" name="password" id="password" class="form-control" placeholder="Enter password" />
                        <span class="glyphicon form-control-feedback" id="password1"></span>
                    </div>
                </div>
                @<div class="form-group has-feedback">
                    <label for="confirm_password" class="control-label col-md-3">Confirm Password:</label>
                    <div class="col-md-9">
                        <input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Confirm password" />
                        <span class="glyphicon form-control-feedback" id="confirm_password1"></span>
                    </div>
                </div>
                @<div class="form-group">
                    <div class="col-sm-offset-3 col-md-9">
                        <input type="submit" class="btn btn-primary" value="Register">
                        <button type="button" class="btn">Cancel</button>
                    </div>
                </div>


            End Using
        </div>
    </div>

3. views\home\RegistrationSuccess.vbhtml
- Add this view based from RegistrationSuccess() method in HomeController.vb
- successful registration page.

            @Code
            ViewData("Title") = "RegistrationSuccess"
            Layout = "~/Views/Shared/_Layout.vbhtml"
            End Code


        <h2>Registration Success</h2>

4. Content\Site.css
- add new style for glyphicons. by default, the input controls have 280px max-width.

         /* added style for icon */
        .glyphicon.form-control-feedback{
            left: 260px; 
        }

5. BundleConfig.vb
- bundle external javascript file FormValidation.js

      Public Sub RegisterBundles(ByVal bundles As BundleCollection)


            bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"))


            ' individual bundling of validate and unobtrusive
            bundles.Add(New ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate.min.js"))


            bundles.Add(New ScriptBundle("~/bundles/jqueryunobtrusive").Include(
                        "~/Scripts/jquery.validate.unobtrusive.min.js"))


            ' Use the development version of Modernizr to develop with and learn from. Then, when you're
            ' ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(New ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"))


            bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"))


            bundles.Add(New StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"))
            
            'bundle FormValidation.js
            bundles.Add(New ScriptBundle("~/bundles/FormValidation").Include(
                     "~/Scripts/FormValidation.js"))

        End Sub

6. _Layout.vbhtml
- render the scripts and styles in this order.

    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/FormValidation")
    @Scripts.Render("~/bundles/jqueryunobtrusive")
    @Scripts.Render("~/bundles/modernizr")

7. Scripts\FormValidation.js
- Add this js file under Scripts folder
- includes remote validation feature for checking existing emails.

   //bootstrap styling 3.x 
        $(function () {


            $("#frmInput").validate({
                submitHandler: function (form) {
                    //submit once validation rules are met
                    form.submit();
                },
                rules: {
                    fname: {
                        minlength: 3,
                        maxlength: 15,
                        required: true
                    },
                    mname: {
                        minlength: 3,
                        maxlength: 15,
                        required: true
                    },
                    lname: {
                        minlength: 3,
                        maxlength: 15,
                        required: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    confirm_password: {
                        required: true,
                        minlength: 6,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true,
                        remote: {
                            url: "/Home/EmailExists",
                            type: "post",
                            data: {
                                email: function () {
                                    return $('#email').val();
                                }
                            }
                        }
                    }
                },
                messages: {
                    email: {
                        remote: "Email already in use!"
                    }
                },
                highlight: function (element) {
                    var id_attr = "#" + $(element).attr("id") + "1";
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                    $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');
                },
                unhighlight: function (element) {
                    var id_attr = "#" + $(element).attr("id") + "1";
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                    $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');
                },
                errorElement: 'span',
                errorClass: 'help-block',
                errorPlacement: function (error, element) {
                    if (element.length) {
                        error.insertAfter(element);
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });

8. Replace bootstrap.css and bootstrap.min.css files in Content folder with version 3.3.6. Since
the default version of these bootstrap css files is 3.0. See attached file.




Entire source code at github MVCFormValidationJQueryValidateVB

That's it..KGC :-)