Bootstrap Snippet Change Password Form With Validation using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- https://markcrowe-com.github.io/website-bootstrap-examples/password-reset.html -->
<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css"
    integrity="sha256-4RctOgogjPAdwGbwq+rxfwAmSpZhWaafcZR9btzUk18="
    crossorigin="anonymous">
        
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h1>Change Password</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div><a href="https://github.com/markcrowe-com/website-bootstrap-examples">See Source on GitHub</a></div>
        </div>
    </div>  <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <p class="text-center">Use the form below to change your password. Your password cannot be the same as your username.</p>
            <form method="post" id="passwordForm">
                <div class="password-container">
                    <input type="password"
                        class="input-lg form-control"
                        name="password1" id="password1"
                        placeholder="New Password"
                        autocomplete="off">
                    <span class="password-button">Show</span>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div><span id="lowercase-notice" class="bi bi-x" style="color:#FF0004;"/>One Lowercase Letter</div>
                        <div><span id="uppercase-notice" class="bi bi-x" style="color:#FF0004;"/>One Uppercase Letter</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    .password-container {
        position: relative
    }
    .password-container .password-button {
        position: absolute;
        top: 50%;
        right: 10px;
        z-index: 1;
        color: #f36c01;
        margin-top: -10px;
        cursor: pointer;
        transition: .3s ease all;
    }
    .password-container .password-button:hover {
        color: #333333;
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// https://markcrowe-com.github.io/website-bootstrap-examples/src/js/password-reset-form-validation.js
function validatePasswordResetForm() {
    const LOWERCASE_NOTICE = "#lowercase-notice";
    const LENGTH_NOTICE = "#length-notice";
    const MATCH_NOTICE = "#match-notice";
    const PASSWORD1 = "#password1";
    const PASSWORD2 = "#password2";
    const NUMBER_NOTICE = "#number-notice";
    const SPECIAL_CHARACTER_NOTICE = "#special-character-notice";
    const UPPERCASE_NOTICE = "#uppercase-notice";
    const PASSWORD_LENGTH = 8;
    let lowerCaseRegExp = /[a-z]+/;
    let upperCaseRegExp = /[A-Z]+/;
    let numberRegExp = /\d+/;
    let specialCharacterRegExp = /[!@#$%^&*()_+]+/;
    setGlyphIcon($(LOWERCASE_NOTICE), lowerCaseRegExp.test($(PASSWORD1).val()));
    setGlyphIcon($(LENGTH_NOTICE), $(PASSWORD1).val().length >= PASSWORD_LENGTH);
    setGlyphIcon($(MATCH_NOTICE), $(PASSWORD1).val() == $(PASSWORD2).val());
    setGlyphIcon($(NUMBER_NOTICE), numberRegExp.test($(PASSWORD1).val()));
    setGlyphIcon($(SPECIAL_CHARACTER_NOTICE), specialCharacterRegExp.test($(PASSWORD1).val()));
    setGlyphIcon($(UPPERCASE_NOTICE), upperCaseRegExp.test($(PASSWORD1).val()));
}
function setGlyphIcon(element, isValid) {
    if (isValid) {
        $(element).removeClass("bi-x").addClass("bi-check").css("color", "#00A41E");
    } else {
        $(element).removeClass("bi-check").addClass("bi-x").css("color", "#FF0004");
    }
}
function toggleShowPassword() {
    $(this).text($(this).text() == "Show" ? "Hide" : "Show");
    $(this).prev().attr('type', function (index, attr) { return attr == 'password' ? 'text' : 'password'; });
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Change Password Form With Validation"
Bootstrap 4.1.1 Snippet by markcrowe

Related: See More

Questions / Comments:

"Change Password Form With Validation" Bootstrap 4.1.1 Snippet by markcrowe

Related: See More

Questions / Comments:

"Change Password Form With Validation"
Bootstrap 4.1.1 Snippet by markcrowe