bootstrap multiselect plugin is not validating properly on multipage

Question

I am creating a multipage form and using davidstutz bootstrap multiselect plugin for select options. I am using the 2 multiselect on first page and 2 on 3rd one. Initially it validates well but if i come back to previous pages after reaching the third page, the next button stops working as it is validating the multiselect present on the third page too.

This the code used for multiselect:

 $('#divisionList').multiselect({
    maxHeight: 150,
    //enableCaseInsensitiveFiltering: true,
    numberDisplayed: 1,
    nonSelectedText: '--Select Division--',
    disableIfEmpty: true,
    buttonClass: 'btn btn-default',
    buttonContainer: '<div class="btn-group btn-group-justified" />',
    //disabledText: 'There is no WorkItem SubHead...'
    onChange: function (element, checked) {
        $(element).closest('.multiselect').valid();
        if (checked === true) {
            $(document).click();
        } else if (checked === false) {

        }
    },
    templates: {
        button: '<a type="button" class="multiselect dropdown-toggle multiselect-title-text" style="width:95%;" data-toggle="dropdown"><span class="multiselect-selected-text"></span></a><a type="button" class="multiselect dropdown-toggle" style="width:5%;" data-toggle="dropdown"><span class="caret"></span></a>'
    }
});

Validation:

  $('#addDbaProjectForm').validate({ // initialize plugin
    ignore: ':hidden:not(".multiselect")',   //.multiselect is the class of select tag
    rules: {
        districtList: "required",
        divisionList: "required",
        projectName: {
            required: true,
            noSpace: true
        },
        subProjectName: {
            required: true,
            noSpace: true
        },
        chainageOfProject: {
            required: true,
            noSpace: true
        }
   }
  });

The next button working is as follows:

     //Step 1
        if (current == 1) {
            // Check validation
            if ($('#addDbaProjectForm').valid()) {
                widget.show();
                widget.not(':eq(' + (current++) + ')').hide();
                setProgress(current);
            }
        }

Answer 1

WOrking Fiddle - https://jsfiddle.net/bdq4a86o/13/

1) Changes done to your fiddle:

1) Added the production URL from rawgit.com for bootstrap-multiselect.js and bootstrap-multiselect.css file.

2) Replaced IIF with If

2) Changes you need to do in your code:

1) Group the controls in your form based on the steps, add class "step1" for step1 controls and "step2" class for step2 controls

<select class="form-control multiselect step1" name="districtList" id="districtList">
                          <option value="">--Select--</option>
                          <option value="A">A</option>
                          <option value="B">B</option>
                          <option value="C">C</option>
                          <option value="D">D</option>
                        </select>

2) You need to validate only that section when "next" button is clicked. So you need to call .valid() method on each classes. For eg:- if ($('.step1').valid())

//Step 1
  if (current == 1) {
    // Check validation
    if ($('.step1').valid()) {
      widget.show();
      widget.not(':eq(' + (current++) + ')').hide();
      setProgress(current);
    }
  }

  //Step 2
  else if (current == 2) {
    if($('.step2').valid()) {
      widget.show();
      widget.not(':eq(' + (current++) + ')').hide();
      setProgress(current);
    }
  }

  //Step 3
  else if (current == 3) {
    if ($('.step3').valid()) {
      widget.show();
      widget.not(':eq(' + (current++) + ')').hide();
      setProgress(current);
    }
  }

3) Code for skip button needs to be added accordingly.