Minimal Password Match Validation Plugin with jQuery

File Size: 3.48 KB
Views Total: 6094
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Password Match Validation Plugin with jQuery

An extremely lightweight jQuery plugin designed for user signup form that displays a validation hint if the "Confirm Password" doesn't matches the "Password" field while the user it typing. Also has an ability to restrict the minimum length of the password to 8 digits.

How to use it:

1. Create an user register form as follow.

<form action="#" method="post">
    <label for="username">Username</label>
    <input id="username" name="username" type="text">
    <label for="password">Password</label>
    <input id="password" name="password" type="password">
    <span>Enter a password longer than 8 characters</span> </p>
    <label for="confirm_password">Confirm Password</label>
    <input id="confirm_password" name="confirm_password" type="password">
    <span>Please confirm your password</span> </p>
    <input type="submit" value="SUBMIT" id="submit">

2. Load the needed jQuery JavaScript Library at the end of the document.

<script src="//"></script> 

3. The core jQuery script to validate the password filed.

var $password = $("#password");
var $confirmPassword = $("#confirm_password");
var $userName = $("#username");

//Hide Hints

$("form span").hide();

function isPasswordValid() {
return $password.val().length > 8;
function isUsernameValid() {
 return $userName.val().length;

function arePasswordsMatching () {
 return $password.val() === $confirmPassword.val();   

function canSubmit() {
 return isPasswordValid() && arePasswordsMatching() && isUsernameValid();   

function passwordEvent() {

  //Find out if password is valid.   
    if(isPasswordValid()) {
    //Hide Hint if valid.
   } else {
    //Else show hint

  //Find out if password and confirmation match.
function confirmPasswordEvent() {
    if(arePasswordsMatching()) {
         //Hide hint if matched.

      //Else show hint.
    } else { 

function enableSubmitEvent(){
    $("#submit").prop("disabled", !canSubmit());

//When event happens on password input

//When event happens on confirmation input

// Call Function

This awesome jQuery plugin is developed by manetsberger90. For more Advanced Usages, please check the demo page or visit the official website.