Skip to main content

Password Feed Back Form In APEX

 A Password Feedback form is often used to provide feedback to users when they are creating or updating their passwords. This form typically includes elements such as password strength indicators, rules for creating a secure password, and a confirmation field. Here's a basic guide on how you might create a Password Feedback Form in Oracle APEX.

Step1: Create Region With the name of SIGN_UP and create the following page items & Buttons


Page Items

 

Type

 

More Information

 

P33_Name

 

Text Field

 

Title="Give  Valid Name"

P33_Password

Password

onpaste="return false"

P33_CPassword

Password

onpaste="return false"

P33_Email

Text Field

oncopy="return false"

P33_Password_Check

Hidden

Turn Off Value Protected

SIGN

Button


Step2: Create Sub Region With the Name of Password Strength. In that Region Paste following HTML Code on Source Property.

<!-- Include Font Awesome CDN in your <head> section -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<div>

    <!-- Password Strength Indicators -->

    <ul class="list-unstyled">

        <li class="">

            <span class="low-upper-case">

                <i class="fas fa-circle" aria-hidden="true"></i>

                &nbsp;Lowercase & Uppercase

            </span>

        </li>

        <li class="">

            <span class="one-number">

                <i class="fas fa-circle" aria-hidden="true"></i>

                &nbsp;Number (0-9)

            </span> 

        </li>

        <li class="">

            <span class="one-special-char">

                <i class="fas fa-circle" aria-hidden="true"></i>

                &nbsp;Special Character (!@#$%^&*)

            </span>

        </li>

        <li class="">

            <span class="eight-character">

                <i class="fas fa-circle" aria-hidden="true"></i>

                &nbsp;At least 8 Characters

            </span>

        </li>

    </ul>

</div>

Step3: In Page Properties ‘Function and Global Variable Declaration’ paste the following code.

let password = document.getElementById("P33_PASSWORD");

let lowUpperCase = document.querySelector(".low-upper-case i");

let number = document.querySelector(".one-number i");

let specialChar = document.querySelector(".one-special-char i");

let eightChar = document.querySelector(".eight-character i");

var status1 = document.getElementById("P33_PASSWORDCHECK");

password.addEventListener("keyup", function(){

    let pass = document.getElementById("P33_PASSWORD").value;

    checkStrength(pass);

});

function checkStrength(password) {

    let strength = 0;

    //If password contains both lower and uppercase characters

    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {

        strength += 1;

        lowUpperCase.classList.remove('fa-circle');

        lowUpperCase.classList.add('fa-check');

        // alert(strength);

    } else {

        lowUpperCase.classList.add('fa-circle');

        lowUpperCase.classList.remove('fa-check');

    }

    //If it has numbers and characters

    if (password.match(/([0-9])/)) {

        strength += 1;

        number.classList.remove('fa-circle');

        number.classList.add('fa-check');

        //  alert(strength);

    } else {

        number.classList.add('fa-circle');

        number.classList.remove('fa-check');

    }

    //If it has one special character

    if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {

        strength += 1;

        specialChar.classList.remove('fa-circle');

        specialChar.classList.add('fa-check');

        //  alert(strength);

    } else {

        specialChar.classList.add('fa-circle');

        specialChar.classList.remove('fa-check');

    }

    //If password is greater than 7

    if (password.length > 7) {

        strength += 1;

        eightChar.classList.remove('fa-circle');

        eightChar.classList.add('fa-check');

    } else {

        eightChar.classList.add('fa-circle');

        eightChar.classList.remove('fa-check');   

    }  

    $x(status1).value=strength;

}

CSS CODE : (CSS - Inline)

body {

    font-family: 'PT Sans', sans-serif;

}

.fa-circle{

    font-size: 6px;  

}

.fa-check{

    color: #02b502;

}

ul

{

    list-style-type: none;

}

Step4: Above code $x(status1).value=strength - This Line Pass Values to the Hidden Page Item P33_Password_Check

Step5: Every Condition will check then it pass value to the hidden Page Item. Here Our Condition is 4 then maximum value of the hidden page item is 4.

Step6: Add one validation to ensure that hidden page item reach value 4.

Validation Name

Password_Strength

Type

Item=value

Item

P33_password_check

Value

4

Error Message

Password Should Satisfy the constraints

When Button Pressed

SIGN


Step7: This validation checks the password constraints are complete or not. Once it complete then only it allows to save.

Demo_Application

Screenshot:-

           



Location: Chennai, Tamil Nadu, India

Comments

Post a Comment

Popular posts from this blog

APEX - Tip: Fix Floating Label Issue

Oracle APEX's Universal Theme provides a modern and clean user experience through features like floating (above) labels for page items.  These floating labels work seamlessly when users manually enter data, automatically moving the label above the field on focus or input.  However, a common UI issue appears when page item values are set Dynamically the label and the value overlap, resulting in a broken and confusing user interface. once the user focuses the affected item even once, the label immediately corrects itself and displays properly. When an issue is reported, several values are populated based on a single user input, causing the UI to appear misaligned and confusing for the end user. Here, I'll share a few tips to fix this issue. For example, employee details are populated based on the Employee name. In this case, the first True Action is used to set the values, and in the second True Action, paste the following code setTimeout(function () {   $("#P29_EMAIL,#P29_...
Post a Comment
Read more

Building a Custom Debug Package for Oracle APEX Using PL/SQL

While developing Oracle APEX applications, debugging page processes and backend PL/SQL logic can be challenging—especially when values are lost between processes or execution flow is unclear.  Although DBMS_OUTPUT is useful, it doesn’t work well inside APEX runtime. To solve this, I built a custom PL/SQL debug Package that logs execution flow and variable values into a database table.  This approach helps trace exactly where the code reached, what values were passed, and whether a block executed or not - even inside page-level processes and packaged procedures Why a Custom Debug Package? Works seamlessly inside Oracle APEX page processes Persists debug information even after session ends Helps trace execution flow Captures runtime values Can be turned ON/OFF dynamically Does not interrupt business logic The Package consists of:- Debug Table                         -  Stores debug messages Sequence ...
Post a Comment
Read more

Conditional Cell Editing in Oracle APEX IG

While browsing the Oracle APEX forum, I noticed a question from a user asking how to disable all other cells in an Interactive Grid row until the first cell has a value. In this blog, we will explore how to disable all other cells in an Interactive Grid row until the first cell contains a value. This approach helps enforce proper data flow, avoids incomplete or invalid records, and improves overall data integrity.  By implementing a simple client-side logic using JavaScript and Dynamic Actions, we can gain fine-grained control over row-level editing behavior in Oracle APEX. Step1: Create IG with static ID of EMP. Step2: Paste the following code in function global declaration. function setCellsToReadOnly()  { var grid = apex.region("EMP").widget().interactiveGrid("getViews", "grid"); if (!grid || !grid.model) { return; } var model = grid.model; model.forEach(function (record, index, id) { var meta = model.getRecordMetadata(id); var fields ...
Post a Comment
Read more