Mandatory * mark in forms

Hello @Sneh bharti , one of my favourite ways is to use custom CSS. Just add the following to literal data label (Check Literal and UNCHECK prevent XSS):

<style>
.theme-entry label[name$="_required"]::after {
  color: red;
  content: "*";
  font-size: 1.4rem;
  font-weight: 700;
  margin-left: 4px;
}
</style>

Then, for all required fields, just add “_requied” to the back of label name for the required control.

Hi @MillaZ Could you please respond to this 1 with detailed answer

 @Deon @MillaZ @Sneh bharti 

I will attempt some screenshots of Deon’s suggestion.

I had to modify the Selector to get Deon’s suggestion to work.

<style>
.theme-entry span.SourceCode-Forms-Controls-Web-Label[name$="_required"]::after {
  color: red;
  content: "*";
  font-size: 1.4rem;
  font-weight: 700;
  margin-left: 4px;
}
</style>

Notice the part that appears “[name$=_required]”

This will select all labels where the name ends in _required.

Also note the “::after”, this will add a decoration defined in the class {}

In this case the content is our “*” content with formatting.

3 controls,

1 with the _required name

1 without the _required name

1 for injecting the CSS.

Notice that Literal is Checked and Prevent XSS is Unchecked.

I use Expression whenever I do these types of injections.

So any label with a name property ending in _required will get a red star after it.