jQuery Plugin Validation (password)

Password validation.

by pixelcellar

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/additional-methods.min.js"></script>
<form class="change-form">
   <fieldset>
        <legend>Create a new account</legend>
        
<table>
    <tr>
        <td>Password</td>
        <td>
            <label for="pass"></label>
            <input id="pass" name="pass" type="password" value="" />
        </td>
    </tr>
    <tr>
        <td>Password confirm</td>
        <td>
            <label for="pass2"></label>
            <input id="pass2" name="pass2" type="password" value="" />
        </td>
    </tr>
</table>
<input type="submit" name="save" value="Save" />
</fieldset>
</form>

CSS

.change-form {
    width: 800px;
    margin: 30px auto;
}
label {
    width: 140px;
    display: inline-block;
}
label.error {
    color: red;
    width: 300px;
}

JavaScript

$.validator.setDefaults({
    submitHandler: function() {
        alert("submitted!");
    }
});

// validate signup form on keyup and submit
    $(".change-form").validate({
    rules: {
        pass: {
            required: true,
            minlength: 5,
            passwordCheck: true
        },
        pass2: {
            required: true,
            minlength: 5,
            equalTo: "#pass"
        }
    },
    messages: {
        pass: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long",
            passwordCheck: "Password Check"
        },
        pass2: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long",
            equalTo: "Please enter the same password as above"
        }
    }
});

$.validator.addMethod("passwordCheck", function(value) {
		return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/.test(value)
		});