Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Pages - Design & Build
Suggested answer

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

Like (1) ShareShare
ReportReport
Posted on 11 Sep 2024 15:10:10 by 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:
  • Suggested answer
    SaiRT14 Profile Picture
    1,966 Super User 2025 Season 1 on 30 Oct 2024 at 21:17:06
    Form Field Background turns Blue how do I throw a Error Message if Background is Blue?
    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.
     
  • Suggested answer
    Inogic Profile Picture
    974 Super User 2025 Season 1 on 30 Oct 2024 at 10:24:44
    Form Field Background turns Blue how do I throw a Error Message if Background is Blue?
    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/ 
  • Jady Profile Picture
    114 on 30 Oct 2024 at 02:59:36
    Form Field Background turns Blue how do I throw a Error Message if Background is Blue?
    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. 

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Power Pages - Design & Build

#1
oliver.rodrigues Profile Picture

oliver.rodrigues 16 Most Valuable Professional

#2
Ă–E-05091504-0 Profile Picture

Ă–E-05091504-0 6

#3
JB-10040341-0 Profile Picture

JB-10040341-0 2

Overall leaderboard

Featured topics

Loading started