Parsley.js 当两个 bootstrap-select 以一种形式出现时无法验证

Question

我有两个 bootstrap-select 欧芹验证效果很好但我有一个小问题 当我 select 一个 bootstrap-select 和另一个没有 selecting 我提交，bootstrap-select 显示 is-valid

但是第二个 bootstrap-select 应该显示 in-valid 但它没有显示

Fiddle

<div class="form-group w-50">
     <label for="edu">Brand</label>
     <select name="brd" class="selectpicker form-control" id="edu" data-live-search="true" data-live-search-style="startsWith" data-parsley-required>
             <option data-display="Select Brand">Select Brand</option>
             <option>Audi</option> 
             <option>BMW</option> 
             <option>Chevrolet</option>
     </select>
 </div>
<div class="form-group w-50">
         <label for="edu">model</label>
         <select name="mdl" class="selectpicker form-control" id="edu" data-live-search="true" data-live-search-style="startsWith" data-parsley-required>
                 <option data-display="Select model">Select model</option>
         </select>
     </div>



  $(document).ready(function (e) {

 $('.selectpicker').selectpicker({
       style: 'btn-light border'
   });
 });

$('.selectpicker').attr('data-trigger', 'change').attr('data-required', 'true');


   $(document).ready(function () {
     $('#adform').parsley({
         errorClass: 'is-invalid text-danger',
         successClass: 'is-valid',
         errorsWrapper: '<div class="input-group"></div>',
         errorTemplate: '<small class="form-text text-danger"></small>',
         trigger: 'change',
         triggerAfterFailure: 'focusout changed.bs.select'
       })
          .on('form:submit', function () {

$('#submiting').modal('show');
                                                        $('.st').css("display", "none");
                                                    });
                                        });


    var eduBak = {}
    eduBak['Audi'] = ['A3', 'A4', 'A6', 'A7', 'A8', 'A8 L', 'A8l', 'Q3', 'Q5', 'Q7', 'R8', 'Rs 5', 'Rs 7', 'S6', 'Tt', 'other'];
    eduBak['BMW'] = ['1 Series', '3 Series', '5 Series', '5 Series Gt', '6 Series', '7 Series', 'Gran Turismo', 'M3', 'M5', 'X5 M', 'M6', 'X6 M', 'Mini', 'X1', 'X3', 'X5', 'X6', 'Z4', 'other'];
    eduBak['Hindustan Motors'] = ['Ambassador', 'Contessa', 'other'];
    $('#edu').on('change', function () {
        var model = $("#edct");
        var educ = $(this).val();
        var ed = eduBak[educ];
        if (ed) {
            model.html('<option data-display="Select Model">Select Model</option>');
            for (var i = 0; i < ed.length; i++) {
                model.append(new Option(ed[i], ed[i]));
            }
        }
        $('.selectpicker').selectpicker('refresh');
    });

Answer 1

实际问题出现在您动态填充第二个下拉列表时。

您将 option 附加到 "Select Model"，这使得 select 有效。添加空值将解决问题。

model.html('<option value="" data-display="Select Model">Select Model</option>');
------------------- ^^^^^^^^-----------------------------------------------------

updated fiddle

Parsley.js 当两个 bootstrap-select 以一种形式出现时无法验证

Parsley.js unable to validate when two bootstrap-select in one form

parsley.js

bootstrap-selectpicker