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.
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)
@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