Sitecore forms required validation is not working for dropdownlist

Question

We have upgraded to Sitecore 10.1 from Sitecore 8.7. In Sitecore forms, dropdownlist required validation is not working.

The required validation is working for all simple type fields but not for dropdownlist.

The following scripts are used on the form

jquery-3.4.1.min.js|jquery.validate.min.js|jquery.validate.unobtrusive.min.js|jquery.unobtrusive-ajax.min.js|form.validate.js|form.tracking.js|form.conditions.js

The validation works fine if I untick the Ajax field and remove jquery.validate.min.js.

This is the dropdown code

<div class="form-group has-feedback">
  <div class="input-wrapper input-wrapper--select">
    <label for="fxb_a893ad86-c664-40fa-87c3-5747d9ac9eed_Fields_6e6ce87d-f224-404f-ac08-667e73785e4f__Value" class="">Dropdown List</label>
    <select id="fxb_a893ad86-c664-40fa-87c3-5747d9ac9eed_Fields_6e6ce87d-f224-404f-ac08-667e73785e4f__Value" name="fxb.a893ad86-c664-40fa-87c3-5747d9ac9eed.Fields[6e6ce87d-f224-404f-ac08-667e73785e4f].Value" class="required-field" data-sc-tracking="True" data-sc-field-name="Dropdown List" data-sc-field-key="0CF27A111DB1409DAAAA52676E8C1C19" data-val-required="Dropdown List is required." data-val="true" tabindex="-1" data-ssid="ss-37702" style="display: none;">
      <option label=" "></option>
      <option value="item1">item1</option>
      <option value="item2">item2</option>
      <option value="item3">item3</option>
    </select>
    <div class="ss-37702 ss-main required-field" style="">
      <div class="ss-single-selected">
        <span class="placeholder"></span>
        <span class="ss-deselect ss-hide">x</span>
        <span class="ss-arrow">
          <span class="arrow-down"></span>
        </span>
      </div>
      <div class="ss-content">
        <div class="ss-search ss-hide">
          <input readonly="" type="search" placeholder="Search" tabindex="0" aria-label="Search" autocapitalize="off" autocomplete="off" autocorrect="off">
        </div>
        <div class="ss-list">
          <div class="ss-option ss-disabled ss-option-selected" data-id="21151737"></div>
          <div class="ss-option" data-id="80565805">item1</div>
          <div class="ss-option" data-id="12651060">item2</div>
          <div class="ss-option" data-id="61433702">item3</div>
        </div>
      </div>
    </div>
  </div>
  <span class="field-validation-error" data-valmsg-for="fxb.a893ad86-c664-40fa-87c3-5747d9ac9eed.Fields[6e6ce87d-f224-404f-ac08-667e73785e4f].Value" data-valmsg-replace="true">Dropdown List is required.</span>
</div>

Any suggestions?

Answer 1

After analyzing your HTML with my Sitecore Vanilla Instance, I found a few things those needs to make attention to.

1. class="required-field", but in my case it is class=""
2. style="display: none;", from where it is coming?

Here is the HTML from my Sitecore instance.

<label for="fxb_404c8535-4ed5-492e-b5f3-d064f2320190_Fields_01d15f1a-9051-43fc-abd7-d6bc632a45ce__Value" class="">Label</label>
<select id="fxb_404c8535-4ed5-492e-b5f3-d064f2320190_Fields_01d15f1a-9051-43fc-abd7-d6bc632a45ce__Value" name="fxb.404c8535-4ed5-492e-b5f3-d064f2320190.Fields[01d15f1a-9051-43fc-abd7-d6bc632a45ce].Value" class="" data-sc-tracking="True" data-sc-field-name="Dropdown List" data-sc-field-key="16F9340F18A0483EA1D3345EE66ECF57" data-val-required="Label is required." data-val="true">
        <option label=" "></option>
        <option value="test">test</option>
        <option value="test1">test1</option>
</select> 

I would suggest you check, if is there any CSS or JS file that is coming on the page and adding things to the OOTB markup.

Also, you need to create a form with this field only and add this to a Sitecore page with the OOTB Layout, that doesn't a part of your upgrade.

Hope this will give you something to notice.

Answer 2

I found out that the slim select script was causing this issue. I added the following CSS and it resolved the validation issue.

select[data-ssid] {
  pointer-events: none;
  opacity: 0;
  display: flex !important;
  position: absolute;
}