Sunday, October 29, 2017

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>

download


No comments:

Post a Comment