I want to add asterik before required fields in sitecore 9 forms. What's the best way of achieving this ?
-
you can add it in fields label.– Gaurav AgarwalJul 27, 2020 at 8:21
-
1@GauravAgarwal ok you means to say for every required field i have to update field Title with *. I am looking for some generic approach as i have large no. of forms– VikasJul 27, 2020 at 8:29
-
1you can write some custom js, that can also handle this– Gaurav AgarwalJul 27, 2020 at 8:33
-
@Vikas The best way to approach this might be use a Front End developer to add a asterisk for the class say for example "label-required". Then in the forms you can specify these classes. So whenever this class is added in the form, it automaticallly applies the asterisk as expected. This might be the approach you can use– SreekrishnanJul 28, 2020 at 13:55
2 Answers
You can achieve using customize your \Views\FormBuilder\FieldTemplates\{Allfields}.cshtml.
Intro:
Basically All sitecore form fields Models are inheriting InputViewModel.
Like below for sample single line input field. This inherits InputViewModel
Sitecore.ExperienceForms.Mvc.Models.Fields.StringInputViewModel : InputViewModel<string>
All Input fields have Required property. Like shown below,
Implementation:
So you can implement like below, This will add asterisk if the field is mandatory
Add this under label section :
@{if (Model.Required) {<p style="color:red">*</p>} }
<!--SingleLineText.cshtml-->
<label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)@{if (Model.Required) {<p style="color:red">*</p>} }</label>
<input id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" type="text" value="@Model.Value"@if (Model.MaxLength > 0)
{<text> maxlength="@Model.MaxLength"</text>} placeholder="@Model.PlaceholderText" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)/>
@Html.ValidationMessageFor(m => Model.Value)
<!--Email.cshtml-->
<label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)@{if (Model.Required){<p style="color:red">*</p>} }</label>
<input id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" type="email" value="@Model.Value"@if (Model.MaxLength > 0)
{<text> maxlength="@Model.MaxLength"</text>} placeholder="@Model.PlaceholderText" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)/>
@Html.ValidationMessageFor(m => Model.Value)
<!--Number.cshtml-->
<label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)@{if (Model.Required) {<p style="color:red">*</p>} }</label>
<input id="@Html.IdFor(m => Model.Value)" name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" type="number" value="@Model.Value.ToInvariantString()" min="@Model.Min.ToInvariantString()" max="@Model.Max.ToInvariantString()" step="@Model.Step.ToInvariantString()" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" data-sc-field-key="@Model.ConditionSettings.FieldKey" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)/>
@Html.ValidationMessageFor(m => Model.Value)
<!--You can add remaining fields also like above-->
Tested (WIth multiple page also)
1st page:
Sitecore Forms uses the standard MVC helper to add validation to a field: @Html.ValidationMessageFor(m => Model.Value) So, you can modify it in order to achieve the desired functionality as described in the following resource: https://stackoverflow.com/questions/8714178/mvc3-validation-unobtrusive-validation-asterisk-for-validation-message Sitecore Forms views can be found in the “\Views\FormBuilder\FieldTemplates” folder. Another solution that you mentioned is to use custom CSS class as described below: https://forums.asp.net/t/2035018.aspx?Show+Asterisk+By+Labels+for+Required+Fields+on+the+form+ You can modify, for example, the “\Views\FormBuilder\FieldTemplates\SingleLineText.cshtml” and “\Views\FormBuilder\FieldTemplates\DropdownList.cshtml” files for the “Single-line text” and “Dropdown list” fields accordingly. I attached an example with the Single-line text to the ticket. Please note that they just show how you can achieve the desired functionally, so you should modify all needed files depending on your needs.
Sitecore also submitted a wish with the product department to have a possibility to control this behavior in the “Forms” application or at least it should be documented how to achieve this. To track the future status of this wish, please use the reference number 219239. More information about public reference numbers can be found here: https://kb.sitecore.net/articles/853187