3

I want to add asterik before required fields in sitecore 9 forms. What's the best way of achieving this ?

4
  • you can add it in fields label. Jul 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
    – Vikas
    Jul 27, 2020 at 8:29
  • 1
    you can write some custom js, that can also handle this Jul 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 Jul 28, 2020 at 13:55

2 Answers 2

2

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>

enter image description here

enter image description here

All Input fields have Required property. Like shown below,

enter image description here


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:

enter image description here 2nd page: enter image description here

0
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.