Skip to main content

Notifications

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 518
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
    SaiRT14 1,559 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
    Inogic 844 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
    Jady 100 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

November 2024 Newsletter…

November 2024 Community Newsletter…

Community Update Oct 28…

Power Platform Community Update…

Tuesday Tip #9 Get Recognized…

Welcome to a brand new series, Tuesday Tips…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 144,316

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 64,290

Leaderboard

Featured topics

Loading complete