How to put asterisk mark(*) in display Text of Custom Table that denote this field is required

Pritam Gupta asked on July 18, 2017 09:05

Hello,

currently i am using Kentico 9,and I need to add asterisk mark in my customtable Fields so user will get idea that this field is required.

I tried to put DisplayText<span class="required-mark">*</span>

in Field caption:

but in data tab i got DisplayText<span class="required-mark">*</span> in header and i want only DisplayText

is there any solution to resolve this issue.

Pleases let me know Thanks

asterisk required field

Correct Answer

Peter Mogilnitski answered on July 18, 2017 16:22

You can do it with pure CSS:

1. To put * after the text box: Put * in the Field appearance\explanation text and in HTML envelope\content before you can add

<style>
.explanation-text 
{
display:inline-flex !important; 
}
</style>

Image Text

2. If you want to put * next to the caption it is even easier: assuming you field called CustomID in HTML envelope\content before you can add:

<style>
label[id*='CustomID']::after {content: "*"; color:red;} 
</style>

Image Text

1 votesVote for this answer Unmark Correct answer

Recent Answers

Jan Hermann answered on July 18, 2017 10:09

Hi, how do you render the form for your custom table?

0 votesVote for this answer Mark as a Correct answer

Pritam Gupta answered on July 18, 2017 10:34

Hi jan,

I am using default layout of custom table.

0 votesVote for this answer Mark as a Correct answer

Jan Hermann answered on July 18, 2017 10:36

Could you please describe in more details how you render the form on your page (what web part, front end/back end)? Maybe some screenshots would be helpful.

0 votesVote for this answer Mark as a Correct answer

Senior Software Engineer - Kentico Xperience MVP

Trevor Fayas answered on July 18, 2017 15:26

I usually have to do this client side. What I've done in the past is use jQuery and add this line:

$(document).ready(function() {
$("label, .label, .fake-label").each(function() {
    if($(this).html().indexOf("*") > -1) {
      $(this).html($(this).html().replace("*","<span class=\"asterisk\">*</span>"));
      $(this).closest(".form-group").addClass("required");
    }
  });
});

0 votesVote for this answer Mark as a Correct answer

Senior Software Engineer - Kentico Xperience MVP

Trevor Fayas answered on July 18, 2017 16:44

Peter, i don't think you need the first part of your step, adding a * to the Explanation Text adds it (normally) after the textbox, your screenshot shows a cut off blue asterisk below the text box.

But your css only using the after is a great solution if the asterisk is after the colon, if you want it before you may have to go my route.

0 votesVote for this answer Mark as a Correct answer

Peter Mogilnitski answered on July 18, 2017 16:51

I haven't finished writing :) yet , but you were quick to reply :). It depends on personal preferences some prefer to put it next to the text box cause caption can be multi-line.

0 votesVote for this answer Mark as a Correct answer

Senior Software Engineer - Kentico Xperience MVP

Trevor Fayas answered on July 18, 2017 17:00

You pulled a me then :P I guess i'm not the only one who posts then starts to edit.

0 votesVote for this answer Mark as a Correct answer

Pritam Gupta answered on July 19, 2017 07:00

Hello All,

My issue is resolve with help of Peter M's Second Solutions

<style>
label[id*='CustomID']::after {content: "*"; color:red;} 
</style>

Thanks To all.

0 votesVote for this answer Mark as a Correct answer

Pritam Gupta answered on July 19, 2017 14:26 (last edited on July 19, 2017 14:26)

Hi,

When i try to add this code on my stage server than i got this following issue..

A potentially dangerous Request.Form value was detected from the client (m$c$FieldEditor$he$mccdc3083-1b65-465d-9600-d855602afa8a$cntElem$txtArea="<style> label[id*='T...").

0 votesVote for this answer Mark as a Correct answer