Question

Mandatory * mark in forms

  • 19 January 2024
  • 7 replies
  • 68 views

Userlevel 2
Badge +2

How To add star mark(*) in form that are mandatory for the user to fill it?


7 replies

Userlevel 3
Badge +10

If you use the OOTB condition ‘if view/form’ passes validation’ and check the ‘Required’ field, the any controls that are marked as required but not filled out will turn red indicating that it is required.

https://help.nintex.com/en-US/k2cloud/userguide/current/Content/Create/K2Designer/Controls/ControlValidation.htm

Otherwise you can add a label, set the text to asterisks, hide it, use a condition like if a control does not contain a value then show the hidden asterisk label.  However you will likely also want to consider when to stop the rule executions and when to create/save the data/start the workflow base on these logic.

Badge +8

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.

Userlevel 2
Badge +2

Hello @Deon I am not getting your point properly could you please explain it by attaching the screenshots step by step to it so that I can understand it properly.

Userlevel 2
Badge +2

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

Userlevel 5
Badge +19

Hi @Sneh bharti unfortunately I am unable to answer product related questions, but hopefully @Deon can assist here! 

Userlevel 2
Badge +3

 @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.

 

View

3 controls,

1 with the _required name

1 without the _required name

1 for injecting the CSS.

Label with the _required name
Label without the Required Name
Injection Control

Notice that Literal is Checked and Prevent XSS is Unchecked.

I use Expression whenever I do these types of injections.

CSS Injection Value
Resultant View

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

Badge +8

Yeah, sorry forgot to mention that if you change the style of the label from “Normal” to “Input Label”, K2 actually changes the tag being rendered from <span> to <label> 

 

 

Reply