多个面板的 jQuery 步骤和验证答案

【问题标题】：jQuery Steps and validation of multiple panels多个面板的 jQuery 步骤和验证
【发布时间】：2015-08-31 12:05:37
【问题描述】：

我有一个由三个简单步骤组成的简单向导。

在前两个步骤中，我有一些表单控件和几个由所选插件处理的选择控件

<div class="col-lg-6 col-lg-offset-1">
    <label for="ExpirationMode" class="control-label">Da operazione</label>
    <div class="">
        <select name="ExpirationMode" id="ExpirationMode"
                class="chosen-select form-control" data-placeholder="Select an item" data-rule-required="true" data-msg-required="Required field">
            <option value=""></option>
            @foreach ( ExpirationModeViewModel e in expirationModeList ) {
                <option value="@e.ExpirationModeID">@e.Description</option>
            }
        </select>
    </div>
</div>

使用以下 javascript

$('.chosen-select').chosen({
    disable_search_threshold: 10,
    no_results_text: 'Oops, no results found',
    allow_single_deselect: true,
    width: '100%'
});

为了使用所选插件处理验证，我在 onStepChanging 事件中添加了以下验证器设置

onStepChanging: function (event, currentIndex, newIndex) {
    // Disable validation on fields that are disabled or hidden.
    form.validate().settings.ignore = ":disabled,:hidden:not('select.form-control')";
    // Start validation; Prevent going forward if false
    return form.valid();
},

当我在第二个面板中添加另一个选定的选择时，就会出现问题。指令form.validate().settings.ignore = ":disabled,:hidden:not('select.form-control')"; 也试图验证第二个面板中的选定元素。

我该如何解决这个问题？我可以告诉验证器只验证当前面板中包含的控件吗？

【问题讨论】：

在您的ignore 设置中，您告诉它不要忽略任何选择的元素。但是，您仍然需要忽略隐藏面板中的 Chosen 元素，因此请调整您的 ignore 设置以更具体。应该很简单，所以不知道你是怎么卡住的。
您将onStepChanging 选项/函数放在哪里确切？您说“我添加了以下验证器设置”，但是，没有这样的 jQuery Validate 选项称为onStepChanging。
@Sparky：谢谢你的回答。请原谅我糟糕的英语。 onStepChanging 是来自 jquery Steps 插件的事件处理程序。我想我完全陷入了这样一个事实，即我不知道如何指示 jQuery Validate 正如您正确指出的那样忽略隐藏面板中的选定元素
好的，那么我不确定你将如何解决这个问题。 jQuery Validate 插件将忽略所有隐藏的元素，这正是它能够与 jQuery Steps 插件一起工作的方式。但是，为了使用 Chosen，您必须能够验证某些隐藏元素。所以你必须弄清楚如何忽略隐藏的选择元素，但只有当它们被步骤隐藏时。不确定如何执行此操作... Steps 是否为您提供了一个自定义选择器，允许您仅定位当前步骤中的元素？
我想是的。我已经看到，在另一个步骤示例中，当用户点击“上一个”按钮时，他使用像这样的选择器来删除当前面板的验证标签。 $(".body:eq(" + newIndex + ") label.error", form).remove();。在我看来，只有在类 body 等于某个索引的元素中找到时，才删除类 label.error 的元素。但是如何在 jquery validate 中使用这样的选择器？

标签： jquery jquery-validate jquery-chosen jquery-steps

【解决方案1】：

如果我没听错，我也有类似的问题。这是我找到的解决方法。在 onStepChanging 我添加了这段代码：

if (newIndex === 1) {
   form.validate().settings.ignore = ":disabled,:hidden:not(#partner)";
} else if (newIndex === 2) {
   form.validate().settings.ignore = ":disabled,:hidden:not(#partner2)";
} else {
   form.validate().settings.ignore = ":disabled,:hidden";
}

其中#partner 和#partner2 是两个<select> 元素的ID。

希望对您有所帮助；对我来说很好。

【讨论】：

谢谢。我试图找到一个基于单个选择器的更通用的解决方案，但实际上这是最快的方法。