引导多选插件在多页上未正确验证答案

【问题标题】：bootstrap multiselect plugin is not validating properly on multipage引导多选插件在多页上未正确验证
【发布时间】：2016-04-08 07:38:17
【问题描述】：

我正在创建一个多页表单并使用 davidstutz 引导多选插件来选择选项。我在第一页使用 2 多选，在第三页使用 2。最初它验证得很好，但如果我在到达第三页后返回上一页，下一个按钮将停止工作，因为它也在验证第三页上存在的多选。

这是用于多选的代码：

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

【问题讨论】：

你能添加一个 js fiddle 来复制这个问题吗？这样你会得到更多的帮助。同时发布您的 HTML
我无法添加小提琴，因为引导多选插件 js 不作为 cdn 存在
但我创建了一个显示概念的小提琴，但它不起作用：jsfiddle.net/adtya/bdq4a86o/5
我检查了它，它在控制台窗口中抛出了一个错误。看看你能不能解决它。
那是复制错误。现在出现了实际情况：jsfiddle.net/adtya/bdq4a86o/12

标签： javascript jquery twitter-bootstrap jquery-validate bootstrap-multiselect

【解决方案1】：

工作小提琴 - https://jsfiddle.net/bdq4a86o/13/

1) 对您的小提琴所做的更改：

1) 为 bootstrap-multiselect.js 和 bootstrap-multiselect.css 文件添加了 rawgit.com 的生产 URL。

2) 将IIF 替换为If

2) 您需要在代码中进行的更改：

1) 根据步骤对表单中的控件进行分组，为 step1 控件添加“step1”类，为 step2 控件添加“step2”类

<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) 需要相应添加跳过按钮的代码。

【讨论】：