connectseekers.com

Friday, 4 March 2016

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

3/04/2016 - By Pranav Singh 0

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.


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.


About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top