Search code examples
javascripthtmloracle-apex

Oracle APEX - how to call a javascript function

I'd like to call a function based on a text input. This is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .message {
            margin-top: 10px;
            color: red;
        }
    </style>
</head>
<body>   
    <div id="uppercase" class="message">Must contain at least one uppercase letter</div>
    <div id="lowercase" class="message">Must contain at least one lowercase letter</div>
    <div id="numeric" class="message">Must contain at least one numeric digit</div>
    <div id="specialchar" class="message">Must contain at least one special character</div>
    
    <script>
        function checkPassword() {
            var password = document.getElementById("P99_NEW_PASSWORD").value;
            var uppercaseMessage = document.getElementById("uppercase");
            var lowercaseMessage = document.getElementById("lowercase");
            var numericMessage = document.getElementById("numeric");
            var specialcharMessage = document.getElementById("specialchar");

            // Reset messages
            uppercaseMessage.style.color = "red";
            lowercaseMessage.style.color = "red";
            numericMessage.style.color = "red";
            specialcharMessage.style.color = "red";

            // Check conditions
            if (/[A-Z]/.test(password)) {
                uppercaseMessage.style.color = "green";
            }
            if (/[a-z]/.test(password)) {
                lowercaseMessage.style.color = "green";
            }
            if (/\d/.test(password)) {
                numericMessage.style.color = "green";
            }
            if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
                specialcharMessage.style.color = "green";
            }
        }
    </script>
</body>
</html>

And this is how it looks like: enter image description here

What I want to do is, when a user enter a password in the New Password field (which is P99_NEW_PASSWORD), checkPassword() will be called. However, I don't know what/where to put to call checkPassword() function. Could anyone help to solve this? Thanks in advance.

Solution

  • Here is a working example for a single message, my page is 206:

    1. Create javascript function in Page Attributes > Function and Global Variable Declaration
            function checkPassword() {
            var password = apex.items.P206_NEW_PASSWORD.getValue();
            var uppercaseMessage = document.getElementById("uppercase");

            // Reset messages
            uppercaseMessage.style.color = "red";

            // Check conditions
            if (/[A-Z]/.test(password)) {
                uppercaseMessage.style.color = "green";
            }
        }
    1. For testing only, the message is displayed as "Post Text" in the page item, source:
    <div id="uppercase">Must Contain at least one uppercase letter</div>

    For UI purposes, this can probably be done cleaner using the same source.

    1. Create a dynamic action on change of P206_NEW_PASSWORD.
    • Add a true action of type "Execute Javascript Code"
    • Code
    checkPassword()
    • Uncheck "Fire on initialization"

    Note: it's fine for code like this to check: the user knows the new password and can check it. However, for any password saving, comparing and validating... that should always be done encrypted and not in clear text. In general it's pretty unusual for apex applications to have their own user management. There are plenty of options for credential management.