MVC : Compare password and confirm password

In this article I am going to explain how to compare password and confirm password in asp.net MVC.

Description:

When creating users in MVC application want users to enter strong password and re-enter password to confirm.

  

Implementation:

  

Model

Add DataAnnotations namespace to login class. DataAnnotations have Compare attribute.

    using System;

    using System.Collections.Generic;

    using System.ComponentModel.DataAnnotations;

    public partial class Login

    {

        public int Id { get; set; }

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

        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 to add users for application.

Complete code of controller

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using mvctest2017.Models;

using System.Security.Cryptography;

namespace mvctest2017.Controllers

{

  

    public class LoginController : Controller

    {

        //

        // GET: /Login/

        DemoEntities db = new DemoEntities();

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Createuser()

        {           

            return View();

        }

        [HttpPost]

        public ActionResult Createuser(Login objlogin)

        {

            if (ModelState.IsValid)

            {

                db.Logins.Add(objlogin);

                db.SaveChanges();

            }

            return View();

        }

    }

}

Add View

Add view for createuser action.

Complete source of View

@model mvctest2017.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.AntiForgeryToken()*@

    @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" />

        </p>

    </fieldset>

}

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

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