Check Password strength using Jquery in MVC application - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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 : 





What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon