Textfield with required asterisk

General
1

Greetings,

I have a textfield and i set it as “required”. I tried using a different theme with CSS and a custom layout, but the textfield still has the “*” show and i can’t seem to figure out how to get rid of it or at least move it to somewhere else.

Thank you,

duy

2

This is the css you should change if you want to change the asterisk appearance:

.v-required-field-indicator {
/* Default settings on reindeer */

color:red;
padding-left:2px;
}

3

Is there a way to completely remove the asterisk?

Setting the color to white is a bit hacky.

4

It is actually the main purpose of the required property to show the annoying asterisk (asterisks are often annoying - I’m a proof of that). So, if you don’t want it, don’t set the property. The non-empty validation is a kind of a secondary purpose. If you want just that, you can use the NullValidator or StringLengthValidator.

You can affect the position of the asterisk within some limits with CSS, depending on the layout in which the field is in. For example, a “direction: rtl” in the proper caption element can move it to left of the caption. But yes, it is very limited.

5

Hi Marko,
I was worried about the non-empty validator but with the NullValidator it seems to work. Are there any other features which are enabled/disabled when a field is set to required? As far as I know there’s only the non-empty validator and the asterisk.

It would have been nice to manipulate it through CSS or in another way, but it’s a nice way with your solution too.

I’m aiming to set a light red background for all required fields. For now I’ll do it with adding an own CSS style to all fields and adding the NullValidator.