3

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 Agarwal Jul 27 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 at 8:29
  • 1
    you can write some custom js, that can also handle this – Gaurav Agarwal Jul 27 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 – Sreekrishnan Jul 28 at 13:55
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

| improve this answer | |
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

| improve this answer | |
-1

As Gaurav said you can use Script to achieve below like this,

Include below script in your page, This will append asterisk to the required fields labels.

var SitecoreForms_MandatoryLable = (function() {
    // Execute only in strict mode
    'use strict';
    return {
        Configurations: {
            _IsAllForms:true, // if true = TO apply all forms | else ill apply for specific selector forms
            _customformIdentifierClass: "custom-mandatory-forms", // TO apply specific forms
            _mandatoryFieldHtmlTemplate: "<p style='color:red;'>*</p>" // Astrisk template
        },
        Init: function() {
           SitecoreForms_MandatoryLable.Modules.AddMandatoryTemplates();
        },

        Modules: {            
            AddMandatoryTemplates: function() {
                // Check required forms
                var allMandatoryInputs = (SitecoreForms_MandatoryLable.Configurations._IsAllForms)
                ?$("form input[data-val='true'],textarea[data-val='true']"):$("."+SitecoreForms_MandatoryLable.Configurations._customformIdentifierClass+" input[data-val='true'],textarea[data-val='true']");

                $.each( allMandatoryInputs, function( key, value ) {
                  var labelIdentifier = $(value).attr("id");
                  var labelFIeld = $("label[for='"+labelIdentifier+"']");
                  labelFIeld.append(SitecoreForms_MandatoryLable.Configurations._mandatoryFieldHtmlTemplate);
                });
            }
        }
    };
})();

SitecoreForms_MandatoryLable.Init();

I tested below snippet, Sorry for poor designing.

enter image description here

Notes:

  • Sample I have included input and textarea, If you need all fields you can include in the script.
  • CHeck configuration for apply for all forms or specific forms.
| improve this answer | |
  • 1
    This will only work for single page forms or the first page of a wizard form. – Richard Seal Jul 27 at 12:29
  • 1
    @RichardSeal You can use mutation events to cover the second page also. In addition, i have added another approach also That will cover the multipage scenario as well. – Andi AR Jul 27 at 21:04
  • Why downvote here, Any explanation please people who downvote. – Andi AR Jul 28 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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