Check Password strength using Jquery in MVC application

In this article I am going to explain how to check Password strength using Jquery in MVC application. 

Description:

I want to show the strength of password entered by users or admin. I am using Jquery to show password’s strength.

Implementation:

Model:

using System;

    using System.Collections.Generic;

    using System.Collections.Generic;

    using System.ComponentModel.DataAnnotations;

    public partial class Login

    {

        public int Id { get; set; }

        [Required(ErrorMessage = "Please enter username")]

        [DisplayFormat(ConvertEmptyStringToNull = true)]

        [Display(Name = "Username", Prompt = "(123) 456-7890")]

        public string Username { get; set; }

        [Required(ErrorMessage = "Please enter password")]

        [DataType(DataType.Password)]

        [StringLength(100, ErrorMessage = "Password \"{0}\" must have {2} character", MinimumLength = 8)]

        [RegularExpression(@"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{6,}$", ErrorMessage = "Password must contain: Minimum 8 characters atleast 1 UpperCase Alphabet, 1 LowerCase Alphabet, 1 Number and 1 Special Character")]

        public string Password { get; set; }

        [Display(Name = "Confirm password")]

        [Required(ErrorMessage = "Please enter confirm password")]

        [Compare("Password", ErrorMessage = "Confirm password doesn't match, Type again !")]

        [DataType(DataType.Password)]

        public string Confirmpwd { get; set; }

        public Nullable<bool> Is_Deleted { get; set; }

    }

Add Controller

Add an empty controller to project. Create an action Createuser.

Complete code of controller:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication2017.Models;

using System.Security.Cryptography;

using System.Configuration;

using System.Net.Mail;

using System.Net;

using System.IO;

namespace mvcapplication2017.Controllers

{

  

    public class LoginController : Controller

    {

        //

        // GET: /Login/

        DemoEntities db = new DemoEntities();

        public ActionResult Index()

        {

            return View();

        }     

        public ActionResult Createuser()

        {           

            return View();

        }

        [HttpPost]

        public ActionResult Createuser(Login objlogin)

        {

            if (ModelState.IsValid)

            {

                db.Logins.Add(objlogin);

                db.SaveChanges();

            }

            TempData["Success"] = "<script>alert('User created successfully');</script>";

            ModelState.Clear();

            return View();

        }  

    }

}

Add View

Now add view for createuser action.

Complete code of View:

@model MvcApplication2017.Models.Login

@{

    ViewBag.Title = "Create user";

}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="~/Scripts/passwordscheck.js"></script>

<link href="~/Scripts/passwordscheck.css" rel="stylesheet" />

<h2>Create user</h2>

@using (Html.BeginForm()) {

    @Html.ValidationSummary(true)

    <fieldset id="register">

        <legend>Create user</legend>

        <div class="editor-label">

            @Html.LabelFor(model => model.Username)

        </div>

        <div class="editor-field">

            @Html.EditorFor(model => model.Username)    

            @Html.ValidationMessageFor(model => model.Username)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Password)

        </div>

        <div class="editor-field">

            @Html.PasswordFor(model => model.Password, new { id = "password" })

           <span id="result"></span>

            @Html.ValidationMessageFor(model => model.Password)

        </div>

        <div class="editor-label">

            @Html.LabelFor(model => model.Confirmpwd)

        </div>

        <div class="editor-field">

            @Html.PasswordFor(model => model.Confirmpwd)

            @Html.ValidationMessageFor(model => model.Confirmpwd)

        </div>

        <p>

            <input type="submit" value="Create" onclick="return Confirmmessage()" />

        </p>

    </fieldset>

}

@Html.Raw(TempData["Success"])

<script src="~/Scripts/jquery.validate.min.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script>

    function Confirmmessage() {

        var alert = confirm("Are you sure want to create user?");

        if (alert) {

            return true;

        } else {

            return false;

        }

    }

</script>

Download Project :