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

Reusable JS Functions for Field Validation in Oracle APEX Forms

 These reusable JavaScript functions provide client-side validation for Oracle APEX forms, improving data accuracy before submission. They allow developers to enforce mandatory fields and ensure certain fields contain only numeric values . By using these functions, APEX forms become more user-friendly and robust , reducing the chance of invalid data entry. Step 1: Create a Static Content region on the Global Page using the Blank with Attributes template. Step 2: Paste the following code into the HTML Source section of the region. <script>     function validateInputField(inputFieldId, pageItemName, errorMessage) {         $(inputFieldId).focusout(function() {             var itemValue = apex.item(pageItemName).getValue();             apex.message.clearErrors(pageItemName);             if (!itemValue) {               ...
Post a Comment
Read more

Reusable JavaScript Function to Highlight Holidays on APEX Date Picker Item

Date pickers are an essential part of web applications, especially when users need to select dates for bookings, reports, or scheduling tasks. However, in many business scenarios, certain dates like holidays, weekends, or special events need to be visually distinguished to prevent users from selecting them by mistake. In this blog, we will create a reusable JavaScript function that highlights holiday dates in an Oracle APEX date picker. This approach allows developers to call the function anywhere in their application, ensuring consistency and reducing redundant code. By the end, you’ll have a flexible solution to visually mark holidays on any date picker item in your APEX applications. Step 1: Create a Static Content region and set it to Blank with Content under the region attributes. Step 2: Inside that region, enclose a <script> tag and paste the following JavaScript function. function applyHolidayFormatterToDateItems(itemNames) {   const holidayList = [   ...
Post a Comment
Read more

Customizing Classic Card Report Template with Collapse Option in Oracle APEX

 This customization adds collapse/expand controls to a Classic Card Report in Oracle APEX, enhancing user interaction and report usability. Step 1: Copy the existing Classic Report Card template and save it with a new name. Step 2: Add the following customized code in the Row Template 2 section. <li class="t-Cards-item #CARD_MODIFIERS#">   <div class="t-Card">     <!-- Icon and Title/Subtitle -->     <a href="javascript:void(0);" class="t-Card-wrap">       <div class="t-Card-icon u-color #CARD_COLOR#">         <span class="t-Icon fa #CARD_ICON#">           <span class="t-Card-initials" role="presentation">#CARD_INITIALS#</span>         </span>       </div>       <div class="t-Card-titleWrap">         <h3 class="t-Card-title">#CARD_TITLE#</h3> ...
Post a Comment
Read more