Validators.push Error CSS

Forms SharePoint Online
1

I have the following validator in place and functions well.

WORKING PERFECTLY

fd.validators.push({
    name: 'SecretMediaValidator',
    error: 'MISSING SECRET MEDIA ATTRIBUTES: Media File Type, Body Site, and Media Description are Required!',
    validate: function(value) {
            return pnp.sp.web.lists.getByTitle("Secret").items.filter("stemParentListitemID eq " + fd.itemId).get().then(function(i) {
               return i.every(item => item.MediaFileType !== null);
               return i.every(item => item.BodySiteStem !== null);
               return i.every(item => item.MediaDescription !== null);

            });
    }
});

GOAL

I was having trouble targeting this unnamed div (found with F12 review), and wanted to apply CSS to it for a better looking popup error. For this example, I have made the background of the validator alert gray for clarity. I do wish I could change the content (words) to get rid of the oops - is that possible?

AlertCSSSample
AlertCSSSample1563×156 21 KB

This is the "Oops! There seem to be some errors below:" header; seems to only change font color and background-color; wish I could change the content (words)


.alert-heading {
       background-color: white !important;
       font-weight: bold!important;
       color: black !important;
       font-size: 40px!important;
}

This is the background of the validator error "MISSING XXX MEDIA ATTRIBUTES: Media File Type, Body Site, and Media Description are Required"; seems to only change background-color and not font color

.alert {
       background-gray: white !important;
       font-weight: bold! important;
       color: white! important;
       font-size: 40px !important;
       border-radius: 25px !important;
}

This is the validator font color

.fd-form .alert-warning .alert-body {
       color: purple !Important;
}

For those (like me) who battle CSS, the F12 Developer Tools really are a life-saver. I am trying to improve those skills myself. I recorded a brief video showing how I found the CSS that allowed me to change the color of the validator font but I need to reduce the file size before uploading.

@Margo - I receive this error with a 2MB video. Am I missing something?

Sorry, that file is too big (maximum size is 3 MB). Why not upload your large file to a cloud sharing service, then paste the link?

2

Hi @shedev,

You can change the popup text with this line:

document.getElementsByClassName("alert-heading")[0].textContent = "New text";

We're looking into the file size error, I'll let you know once we figure it out.

1 Like
3

UPDATE

@IliaLazarevskii I have added these elements but still get the MS text. What are the targeting rules here and what am I missing?

MSTextRemains
MSTextRemains824×363 21.3 KB

4

Hi @shedev,

The code seems on point. Could you specify the exact version of Forms you're using and send an export of this form to support@plumsail.com?

5

@IliaLazarevskii - thank you for your question.

Plumsail Forms Version 3.6.6. I will export the EDIT view and get it to you now.

UPDATE: I am a moron.

I applied the JS in the DISPLAY view while testing the EDIT view. Wow, my apologies.

NewErrorText

SOLVED

1 Like