Bootstrap 3 and jQuery Form Validation Plugin in Asp.Net MVC

This article will show you how you can create a registration from validation using jquery and bootstrap 3 plugin for your asp.net mvc application.

Some of my previous articles are as follows: MultiSelect DropdownList Using jQuery in Asp.Net MVC and C#.Net, Three Level Menus With Disable Menu Item Using jQuery In Asp.Net, jQuery Dialog Box Open with Blind and Close With Explode Effect in Asp.Net, jQuery Digital Clock For Asp.Net, MVC and HTML Applications, jQuery Datepicker Calendar With Slide Down Effect In Asp.Net, jQuery Code To Select Multiple Item By Pressing Ctrl Button In Asp.Net, jQuery Accordion Menu With Sortable Effect in Asp.net, Add Remove Or Change Css Class Using jQuery In Asp.Net.

So for this article first we will create a new asp mvc application and add a model class file and add the below code.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication1.Models {     public class UserModel     {         public string firstName { get; set; }         public string lastName { get; set; }         public string username { get; set; }         public string email { get; set; }         public string password { get; set; }         public bool agree { get; set; }     } }

After this we will add the controller class file and add the below code.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcApplication1.Models; namespace MvcApplication1.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             return View();         }         [HttpPost]         public ActionResult Index(UserModel objusermodel)         {             return View(objusermodel);         }     } }

In above code I have added the get and post both the method. Now we will create view file and check the below code.

Now refer the reference website. In this we can download the reference content. Add the below library reference.

<link rel="stylesheet" href="../../Content/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="../../FormValidation/css/formValidation.css" /> <script type="text/javascript" src="../../Content/jquery/jquery.min.js"></script> <script type="text/javascript" src="../../Content/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../../FormValidation/js/formValidation.js"></script> <script type="text/javascript" src="../../FormValidation/js/framework/bootstrap.js"></script>

After this we will add the below code into the page.

@model MvcApplication1.Models.UserModel     @{     ViewBag.Title = "Bootstrap 3 and jQuery Form Validation Plugin in Asp.Net MVC"; } <link rel="stylesheet" href="../../Content/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="../../FormValidation/css/formValidation.css" /> <script type="text/javascript" src="../../Content/jquery/jquery.min.js"></script> <script type="text/javascript" src="../../Content/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../../FormValidation/js/formValidation.js"></script> <script type="text/javascript" src="../../FormValidation/js/framework/bootstrap.js"></script> <script type="text/javascript">     $(document).ready(function () {         // Generate a simple captcha         function randomNumber(min, max) {             return Math.floor(Math.random() * (max - min + 1) + min);         };         $('#defaultForm').formValidation({             message: 'This value is not valid',             icon: {                 valid: 'glyphicon glyphicon-ok',                 invalid: 'glyphicon glyphicon-remove',                 validating: 'glyphicon glyphicon-refresh'             },             fields: {                 firstName: {                     row: '.col-sm-4',                     validators: {                         notEmpty: {                             message: 'Please enter first name is required'                         }                     }                 },                 lastName: {                     row: '.col-sm-4',                     validators: {                         notEmpty: {                             message: 'Please enter last name'                         }                     }                 },                 username: {                     message: 'The username is not valid',                     validators: {                         notEmpty: {                             message: 'Please enter username'                         },                         stringLength: {                             min: 6,                             max: 30,                             message: 'The username must be more than 6 and less than 30 characters long'                         },                         regexp: {                             regexp: /^[a-zA-Z0-9_\.]+$/,                             message: 'The username can only consist of alphabetical, number, dot and underscore'                         }                     }                 },                 email: {                     validators: {                         notEmpty: {                             message: 'Please enter email address'                         },                         emailAddress: {                             message: 'The input is not a valid email address'                         }                     }                 },                 password: {                     validators: {                         notEmpty: {                             message: 'Please enter password'                         },                         different: {                             field: 'username',                             message: 'The password cannot be the same as username'                         }                     }                 },                 agree: {                     validators: {                         notEmpty: {                             message: 'You must agree with the terms and conditions'                         }                     }                 }             }         });     }); </script> @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "defaultForm", @method = "post", @class = "form-horizontal" })) {     <div class="container">         <div class="row">             <div class="col-sm-8 col-sm-offset-2">                 <div class="page-header">                     <h2>                         User Registration Form</h2>                 </div>                 <div class="form-group">                     <label class="col-sm-3 control-label">                         Full name</label>                     <div class="col-sm-4">                         @Html.TextBoxFor(m => m.firstName, new { @class = "form-control", @placeholder = "First name" })                     </div>                     <div class="col-sm-4">                         @Html.TextBoxFor(m => m.lastName, new { @class = "form-control", @placeholder = "Last name" })                     </div>                 </div>                 <div class="form-group">                     <label class="col-sm-3 control-label">                         Username</label>                     <div class="col-sm-5">                         @Html.TextBoxFor(m => m.username, new { @class = "form-control" })                     </div>                 </div>                 <div class="form-group">                     <label class="col-sm-3 control-label">                         Email address</label>                     <div class="col-sm-5">                         @Html.TextBoxFor(m => m.email, new { @class = "form-control" })                     </div>                 </div>                 <div class="form-group">                     <label class="col-sm-3 control-label">                         Password</label>                     <div class="col-sm-5">                         @Html.TextBoxFor(m => m.password, new { @class = "form-control" })                     </div>                 </div>                 <div class="form-group">                     <div class="col-sm-6 col-sm-offset-3">                         <div class="checkbox">                             <label>                                 @Html.CheckBoxFor(m => m.agree, new { @value = "agree" })                                 Agree with the terms and conditions                             </label>                         </div>                     </div>                 </div>                 <div class="form-group">                     <div class="col-sm-9 col-sm-offset-3">                         <button type="submit" class="btn btn-primary" name="signup" value="Sign up">                             Save</button>                     </div>                 </div>             </div>         </div>     </div> }

In above code I have used the jquery validation method to validate the form. In this I have added appropriate message also. Now we have done run the page and click on the page.

 After click the form will look as shown below.

Now add some data and check the response.

After adding all the data click on the save button.

Here we can see all the added data into the page.

DOWNLOAD