In this article I will explain with an example, how to perform Password and Confirm Password validation for Password TextBox using JavaScript in ASP.Net Core Razor Pages.
The values of the Password and Confirm Password TextBoxes are compared using JavaScript and if the values do not match an error message is displayed.
Razor PageModel (Code-Behind)
The PageModel consists of following Handler method.
Handler method for handling GET operation
This Handler method handles the GET calls, for this particular example it is not required and hence left empty.
public class IndexModel : PageModel
{
public void OnGet()
{
}
}
Razor Page (HTML)
The HTML of Razor Page consists of two HTML Password TextBoxes and a Button.
The Button has been assigned a JavaScript OnClick event handler.
When the Submit Button is clicked, the Validate JavaScript function gets executed.
Inside the Validate JavaScript function, the values of the Password and the Confirm Password TextBoxes are fetched and are compared.
If the values do not match, an error message is displayed using JavaScript Alert Message Box.
@page
@model Password_ConfirmPassword_JavaScript_Razor_Core.Pages.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table>
<tr>
<td>Password:</td>
<td><input type="password" id="txtPassword" /></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" id="txtConfirmPassword" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnSubmit" value="Submit" onclick="return Validate()" /></td>
</tr>
</table>
<script type="text/javascript">
function Validate() {
var password = document.getElementById("txtPassword").value;
var confirmPassword = document.getElementById("txtConfirmPassword").value;
if (password != confirmPassword) {
alert("Passwords do not match.");
return false;
}
return true;
}
</script>
</body>
</html>
Screenshot
![ASP.Net Core Razor Pages: Password and Confirm Password validation using JavaScript]()
Downloads
