Skip to main content

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

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.


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 labellname$="_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.


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.


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


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


 @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-Labelename$="_required"]::after {
color: red;
content: "*";
font-size: 1.4rem;
font-weight: 700;
margin-left: 4px;
}
</style>

Notice the part that appears “pname$=_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.


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