CODEWITHSUNDEEP
parsley.jsbootstrap-selectpicker
sanoj lawrence
sanoj lawrence

Reputation: 993

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

i have two bootstrap-select parsley validation works great but i have a small issue when i select one bootstrap-select and another without selecting and i submit, both bootstrap-select shows is-valid

But second bootstrap-select should show in-valid but it doesn't show

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');
    });

Upvotes: 1

Views: 304

Answers (1)

Okan Kocyigit
Okan Kocyigit

Reputation: 13441

The actual problem is on while you are dynamically populating the second dropdown.

You append an option with "Select Model", that makes the select is valid. Adding an empty value will fix the problem.

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

updated fiddle

Upvotes: 2

Related Questions