How can I show check icon based on the value of Textbox entered?

Question

How can I show a check icon based on the value of a textbox?

For example, I have hidden check icons, so when I enter a lowercase alphabet in the textbox, a hidden font icon should show. Also, when I enter uppercase, a hidden check icon should show. If I enter a special character, a check icon should show as well. The same thing for number (or digit); when I enter a number in the textbox, an icon should show.

Please can anyone help me to learn this?

<div class="container-fluid">
                    <label for="txtPassword" style="font-weight: 500;">Create your Password</label>
                    <div class="input-group">
                        <asp:TextBox ID="pass" runat="server" TextMode="Password" CssClass="form-control" Font-Size="11pt" placeholder="Password" onkeyup="CheckPasswordStrength(this.value)" />
                    </div>
                    <span id="password_strength"></span>
                    <asp:RegularExpressionValidator ID="Regex3" runat="server" Font-Size="8pt" ValidationExpression="(?=^.{10,}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&amp;*()_+}{&quot;:;'?/&gt;.&lt;,])(?!.*\s).*$" ControlToValidate="pass" ForeColor="Red"></asp:RegularExpressionValidator>
                    <ul style="margin-top: 4%; font-size: 9pt; vertical-align: baseline; margin: 0 auto; padding: 10px; color: #145c7c;">
                        <li>Minimum of 10 characters&nbsp;<i class="fa fa-check-circle-o" id="10xter" style="color: #33c016; display: none;"></i></li>
                        <li>Uppercase&nbsp;<i class="fa fa-check-circle-o" id="upper" style="color: #33c016; display: none;"></i></li>
                        <li>Lowercase&nbsp;<i class="fa fa-check-circle-o" id="lower" style="color: #33c016; display: none;"></i></li>
                        <li>Number&nbsp;<i class="fa fa-check-circle-o" id="number" style="color: #33c016; display: none;"></i></li>
                        <li>Special character&nbsp;<i class="fa fa-check-circle-o" id="special" style="color: #33c016; display: none;"></i></li>
                    </ul>
                </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function CheckPasswordStrength(password) {
            var password_strength = document.getElementById("password_strength");

            //TextBox left blank.
            if (password.length == 0) {
                password_strength.innerHTML = "";
                return;
            }

            //Regular Expressions.
            var regex = new Array();
            regex.push("[A-Z]");
            regex.push("[a-z]");
            regex.push("[0-9]");
            regex.push("[$@$!%*#?&]");

            var passed = 0;

            for (var i = 0; i < regex.length; i++) {
                if (new RegExp(regex[i]).test(password)) {
                    passed++;
                }
            }
            if (passed > 2 && password.length > 10) {
                passed++;
            }

            //Display status.
            var color = "";
            var strength = "";
            switch (passed) {
                case 0:
                case 1:
                    strength = "Weak";
                    color = "red";
                    break;
                case 2:
                    strength = "Good";
                    color = "darkorange";
                    break;
                case 3:
                case 4:
                    strength = "Strong";
                    color = "green";
                    break;
                case 5:
                    strength = "Very Strong";
                    color = "darkgreen";
                    break;
            }
            password_strength.innerHTML = strength;
            password_strength.style.color = color;
        }
    </script>

Answer 1

Hi @Donald Symmons

1.Add an ID to the li tag

<li id="Uppercase" style="display: none;">Uppercase&nbsp;<i class="fa fa-check-circle-o" id="upper" style="color: #33c016; display: none;"></i></li>
<li id="Lowercase" style="display: none;">Lowercase&nbsp;<i class="fa fa-check-circle-o" id="lower" style="color: #33c016; display: none;"></i></li>
<li id="Number" style="display: none;">Number&nbsp;<i class="fa fa-check-circle-o" id="number" style="color: #33c016; display: none;"></i></li>
<li id="Special character" style="display: none;">Special character&nbsp;<i class="fa fa-check-circle-o" id="special" style="color: #33c016; display: none;"></i></li>

2.Change Script Code:

function CheckPasswordStrength(password) {
            var password_strength = document.getElementById("password_strength");
            
            
            //TextBox left blank.
            if (password.length == 0) {
                password_strength.innerHTML = "";
                return;
            }
            //Regular Expressions.
            var regex = new Array();
            regex.push("[A-Z]");
            regex.push("[a-z]");
            regex.push("[0-9]");
            regex.push("[$@$!%*#?&]");
            var passed = 0;
            if (RegExp(regex[0]).test(password))
            {
                var li1 = document.getElementById("Uppercase");
                li1.style.display = "";
            }
            if (RegExp(regex[1]).test(password)) {
                var li2 = document.getElementById("Lowercase");
                li2.style.display = "";
            }
            if (RegExp(regex[2]).test(password)) {
                var li3 = document.getElementById("Number");
                li3.style.display = "";
            }
            if (RegExp(regex[3]).test(password)) {
                var li4 = document.getElementById("Special character");
                li4.style.display = "";
            }
            for (var i = 0; i < regex.length; i++) {
                if (new RegExp(regex[i]).test(password)) {
                    passed++;
                    
                }
            }
            if (passed > 2 && password.length > 10) {
                passed++;
            }
            //Display status.
            var color = "";
            var strength = "";
            switch (passed) {
                case 0:
                case 1:
                    strength = "Weak";
                    color = "red";
                    
                    break;
                case 2:
                    strength = "Good";
                    color = "darkorange";
                    
                    break;
                case 3:
                case 4:
                    strength = "Strong";
                    color = "green";
                    break;
                    
                case 5:
                    strength = "Very Strong";
                    color = "darkgreen";
                    break;
            }
            password_strength.innerHTML = strength;
            password_strength.style.color = color;
        }

Output:

Best Regards

Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.