How can I add red asterisk on the required textfield

Support
#1

Hi
Want to add red asterisk for the required textfield. How can I do that?

#2

Hi,

you can edit the xml screen descriptor and set property required=“true” like this:

<textField id="someField" caption="Some Caption" required="true"/>

and a red asterisk will appear.
If you have the commercial version, you can select that field in the “Component Hierarchy” window, or place the cursor in the XML descriptor over it, and then click on the required property in the “Properties” window.

It can also be done programmatically in the screen controller .java file

//Inject the field, can use Inject button and then select from the list instead of typeing
    @Inject
    private TextField someField;
......
//can press Generate Handler button
    @Subscribe
    public void onBeforeShow(BeforeShowEvent event) {
        someField.setRequired(true)
    }
2 Likes
#3

Hi,
I’ve already tried that. It’s not working.

#5

Hello,

Halo and Hover do not show the red asterisk by default. You should extend theme in the application and add the following variable to ***-defaults.scss file:

$v-show-required-indicators: true;
#7

Thank you! It’s working. But what if I don’t want Required Fields to come in Red color box. Is there any solution to that?

#8

You can override .v-textfield-required style and change the border-color:

.v-textfield-required {
   border-color: first-color(valo-border($v-textfield-border,
                             darkest-color($v-textfield-background-color, $v-app-background-color))) !important;
}

Another solution is to change the SCSS variable. It will be applied not only for required fields but fields with errors, and you have to hardcode the value:

$v-error-indicator-level-error-color: #9a9a9a;