How To Validate Password And Confirm Password in MVC

How to validate password and confirm the password in MVC: 

In this tutorial, we will see how we can validate the two passwords from different text boxes. In this scenario, we will use the annotation to validate the password.

How To Validate Password And Confirm Password in MVC


Let me summarize, what exactly the annotation is, annotation in MVC is used to validate the field of the model on the server side without refreshing the page.

To achieve this validation you have to add and put some scripts on your page to prevent refreshing the page during validation on button click.

jquery-3.4.1.min.js (Any version of JQuery)

jquery.validate.min.js

jquery.validate.unobtrusive.min.js

Let's start the steps to compare password validation

#Step 1

Add Model Class

Add Namespace in Model Class

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Web;

 

namespace Models

{

    public class CustomerRegistration

    {

        [Required(ErrorMessage = "*")]

        [MaxLength(15, ErrorMessage = "Password cannot be longer than 15 characters.")]

        public string password { get; set; }

        [Required(ErrorMessage = "*")]

        [System.ComponentModel.DataAnnotations.Compare("password", ErrorMessage = "Confirm  Password doesn't match, Try again !")]

        public string ConfirmPassword { get; set; }

    }

}

#Step 2

Add Controller

using MyFirstApp.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace MyFirstApp.Controllers

{

    public class RegistrationController : Controller

    {

        public ActionResult CustomerRegistration()

        {

            return View();

        }

        [HttpPost]

        public ActionResult CustomerRegistration(CustomerRegistration Model)

        {

            if (ModelState.IsValid)

            {

                //Write the logic Here

            }

            return View();

        }

    }

}

#Step 3

Add Views (By Right clicking on  CustomerRegistration Action)


Password And Confirm Password in MVC


@model MyFirstApp.Models.CustomerRegistration

 

@{

    ViewBag.Title = "Password Validation";

}

 

<h2>CustomerRegistration</h2>

 

@using (Html.BeginForm())

{

    @Html.AntiForgeryToken()

 

    <div class="form-horizontal">

        <h4>CustomerRegistration</h4>

        <hr />

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">

            @Html.LabelFor(model => model.password, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.password, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.password, "", new { @class = "text-danger" })

            </div>

        </div>

 

        <div class="form-group">

            @Html.LabelFor(model => model.ConfirmPassword, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                @Html.EditorFor(model => model.ConfirmPassword, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.ConfirmPassword, "", new { @class = "text-danger" })

            </div>

        </div>

 

        <div class="form-group">

            <div class="col-md-offset-2 col-md-10">

                <input type="submit" value="Create" class="btn btn-default" />

            </div>

        </div>

    </div>

}

 

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

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

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


Finally, we achieved the Validate Password And Confirm Password in MVC.

 

Post a Comment

Post a Comment (0)

Previous Post Next Post