connectseekers.com

Saturday, 13 September 2014

Password Strength Validation in Asp.net MVC Using jQuery

9/13/2014 - By Pranav Singh 0

This article will show you how you can use a password strength meter in your asp.net mvc using jQuery, c#.net. In this I will show if password is weak at that time you will not be able to submit form otherwise you will be able to submit the form.


So for this article first we will create a new asp.net mvc application and add a controller class file. Now add the below code into your controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(string Password)
        {
            ViewBag.Message = "Password entered by you :" + Password;
            return View();
        }

    }
}

In above code while post back I am capturing the entered password and then passing it to view by storing in viewbag.

Now create a view and add the below code.

@{
    ViewBag.Title = "Password Strength Validation in Asp.net MVC Using jQuery";
}
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/passwordStrengthMeter.js" type="text/javascript"></script>
<script language="javascript">
    var result = "";
    jQuery(document).ready(function () {       
        $('#txtpassword').keyup(function () {
            $('#result').html(passwordStrength($('#txtpassword').val(), ""))
            result = $('#result').html();
            if (result == "Too short") {
                $('#result').attr({ 'style': 'color:Red;' });
            }
            if (result == "Bad") {
                $('#result').attr({ 'style': 'color:Olive;' });
            }
            if (result == "Good") {
                $('#result').attr({ 'style': 'color:Lime;' });
            }
            if (result == "Strong") {
                $('#result').attr({ 'style': 'color:Green;' });
            }
         
        })
    })
    function ValidateForm() {
        if (result == "Good" || result == "Strong") {
            return true;
        }
        else {
            alert("Password not strong.");
            return false;
        }
      
    }
</script>
@using (Html.BeginForm("Index", "Home"))
{
    <div>
        Password: @Html.Password("Password", "", new { @Id = "txtpassword" })
        <span id='result'></span>
    </div>
    <br />
    <div style="text-align:center">
        <input type="submit" value="Submit" onclick="javascript:return ValidateForm();"/></div>
   
    <div style="color:Red;font-weight:bold;">@ViewBag.Message</div>
   
}

In above code I have used passwordStrengthMeter jQuery plugging to validate the password. As per result I am checking the value and then making changes in status color.

On submit I am validating what the status and as per result I am allowing user to submit the form.

DOWNLOAD 

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