How to show and hide password when click on eye icon using jQuery and also both the password (new and confirm) should be matched

Question

How to show and hide password when click on eye icon using jQuery and also both the password (new and confirm) should be matched

43 views Asked by Ashif Bin Hossain At 05 February 2024 at 10:16

[enter image description here](https://ienter image description here.stack.imgur.com/ZuIPX.jpg)

Original Q&A

There are 1 answers

**Zohair** · Accepted Answer · 2024-02-05T10:20:03+00:00

I have one implementation in my project, which I am sharing here, you can also use it for sure, let me know if it works for you:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show/Hide Password</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        .password-container {
            position: relative;
        }

        .password-input {
            padding-right: 30px;
        }

        .eye-icon {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="password-container">
    <label for="new-password">New Password:</label>
    <input type="password" id="new-password" class="password-input" required>
    <span class="eye-icon" id="toggle-new-password">️</span>
</div>

<div class="password-container">
    <label for="confirm-password">Confirm Password:</label>
    <input type="password" id="confirm-password" class="password-input" required>
    <span class="eye-icon" id="toggle-confirm-password">️</span>
</div>

<script>
    $(document).ready(function () {
        // Show/hide password for new password input
        $('#toggle-new-password').on('click', function () {
            togglePasswordVisibility('#new-password');
        });

        // Show/hide password for confirm password input
        $('#toggle-confirm-password').on('click', function () {
            togglePasswordVisibility('#confirm-password');
        });

        // Function to toggle password visibility
        function togglePasswordVisibility(passwordField) {
            var passwordInput = $(passwordField);
            var fieldType = passwordInput.attr('type');
            var newFieldType = (fieldType === 'password') ? 'text' : 'password';
            passwordInput.attr('type', newFieldType);
        }

        // Check if new and confirm passwords match
        $('#confirm-password, #new-password').on('keyup', function () {
            var newPassword = $('#new-password').val();
            var confirmPassword = $('#confirm-password').val();

            if (newPassword === confirmPassword) {
                // Passwords match
                // You can add your code here if needed
            } else {
                // Passwords do not match
                // You can add your code here if needed
            }
        });
    });
</script>

</body>
</html>

TechQA.

How to show and hide password when click on eye icon using jQuery and also both the password (new and confirm) should be matched

There are 1 answers

Related Questions in MATCH

Related Questions in SHOW-HIDE

Popular Questions

Popular Tags

Trending Questions