Плагин bootstrap multiselect неправильно проверяет многостраничность

Я создаю многостраничную форму и использую плагин davidstutz bootstrap multiselect для выбора параметров. Я использую 2 мультиселекта на первой странице и 2 на 3-й. Первоначально он проверяется хорошо, но если я вернусь к предыдущим страницам после достижения третьей страницы, следующая кнопка перестанет работать, поскольку она также проверяет множественный выбор, присутствующий на третьей странице.

Этот код используется для множественного выбора:

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

Проверка:

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

Следующая кнопка работает следующим образом:

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

javascript jquery twitter-bootstrap jquery-validate bootstrap-multiselect
person Aditya Agarwal    schedule 08.04.2016    source источник
comment
Вы можете добавить скрипт js, чтобы воспроизвести проблему? таким образом вы получите больше помощи. Также опубликуйте свой HTML   -  person Rajshekar Reddy    schedule 08.04.2016
comment
я не могу добавить скрипку, потому что js-плагин bootstrap multiselect отсутствует как cdn   -  person Aditya Agarwal    schedule 08.04.2016
comment
Но я создал скрипт, демонстрирующий концепцию, но он не работает: jsfiddle.net/adtya/bdq4a86o/ 5   -  person Aditya Agarwal    schedule 08.04.2016
comment
Я проверил это, и это выдает ошибку в окне консоли. Посмотрим, сможешь ли ты это исправить.   -  person Rajshekar Reddy    schedule 08.04.2016
comment
это была ошибка копирования. реальный сценарий теперь присутствует: jsfiddle.net/adtya/bdq4a86o/12   -  person Aditya Agarwal    schedule 08.04.2016
comment
используйте cdn.rawgit.com/davidstutz/bootstrap -multiselect/master/dist/js/ в вашей скрипке. Вы можете создать cdn для любого проекта, который находится в github, используя rawgit.com   -  person koolhuman    schedule 08.04.2016
comment
Я сделал это. Проверьте последнюю скрипку.   -  person Aditya Agarwal    schedule 08.04.2016
comment
@Aditya - проверьте приведенный ниже ответ и отметьте его как ответ, если он решит вашу проблему.   -  person koolhuman    schedule 11.04.2016

Ответы (1)


arrow_upward
0
arrow_downward

РАБОЧАЯ Скрипта — https://jsfiddle.net/bdq4a86o/13/

1) Изменения в вашей скрипке:

1) Добавлен рабочий URL-адрес с сайта rawgit.com для файла bootstrap-multiselect.js и bootstrap-multiselect.css.

2) Заменил IIF на If

2) Изменения, которые необходимо внести в код:

1) Сгруппируйте элементы управления в своей форме на основе шагов, добавьте класс «шаг 1» для элементов управления «шаг 1» и класс «шаг 2» для элементов управления «шаг 2».

<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) Вам нужно проверить только этот раздел, когда нажата кнопка «Далее». Поэтому вам нужно вызвать метод .valid() для каждого класса. Например: - 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) Необходимо добавить соответствующий код для кнопки пропуска.

person koolhuman    schedule 11.04.2016