Form Field Background turns Blue how do I throw a Error Message if Background is Blue?

(1) Share

Report

Posted on by SPS-DEV-22

516

I have a form, which this has Never been an issue prior, when the Wallet and or Saved Personal Data popup causes the Text Box to turn blue.

I have turned off the items in Admin Center, however, I want to have an Error Message if the background of the Text Box is Blue.

I can not seem to find the Property item to have a message error saying "Do not used the Wallet and or the Saved Personal Data."

How would I do this?

Categories:

Design & build

I have the same question (0)

All responses (3)

Answers (0)

Sort by

Jady 147 on at

Like (0)

Report
Copy link

Link copied!

This might be a CSS issue. Try looking though the HTML & CSS with your browser's Developer Tools. It might be a CSS pseudo element such as :focus that applies the background-color of blue.

Was this reply helpful? Yes No
Suggested answer

Inogic 1,291 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hi,

We are a bit unclear about your requirements.

However, as per our understanding, you wish to display a message when the background of the text box is blue.

To achieve this functionality, We have to use custom JavaScript within the form.

Navigate to the Power Pages Management > Basic Form > Advance Settings (Tab) > Custom Scripts (Section)

Paste the below code in the Custom JavaScript section,

Adjust the code with your background Text Box Color.

$(document).ready(function() {

    // Select all input elements in the form
    var $inputBoxes = $('input[type="text"], input[type="number"], input[type="email"], input[type="tel"], textarea');

    // Create and append the error message element to each input box
    $inputBoxes.each(function() {
        $(this).after('<div class="error-message" style="color: red; display: none;">Do not use the Wallet and/or the Saved Personal Data.</div>');
    });

    // Function to toggle error message visibility based on background color
    function toggleErrorMessage($input) {
        var $errorMessage = $input.next('.error-message');
        if ($input.css('background-color') === 'rgb(0, 0, 255)') {
            $errorMessage.show();
        } else {
            $errorMessage.hide();
        }
    }

    // Attach events to input boxes
    $inputBoxes.on('input focus', function() {
        toggleErrorMessage($(this));
    }).on('blur', function() {
        if ($(this).css('background-color') !== 'rgb(0, 0, 255)') {
            $(this).next('.error-message').hide();
        }
    });
});

Please refer the result given below,

Hope this helps.

Thanks!

Inogic Professional Services: Power Platform/Dynamics 365 CRM
An expert technical extension for your techno-functional business needs
Drop an email at crm@inogic.com
Service: https://www.inogic.com/services/
Tips and Tricks: https://www.inogic.com/blog/

Was this reply helpful? Yes No
Suggested answer

SaiRT14 1,992 Super User 2025 Season 1 on at

Like (0)

Report
Copy link

Link copied!
simple steps:

Set the OnSelect property or OnChange property of the text box

Create a label control for the error message and set its Visible property to display conditionally based on the background color.

Was this reply helpful? Yes No