jQuery 多个面板的步骤和验证

Question

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

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

<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();
},

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

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

Answer 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。

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

jQuery 多个面板的步骤和验证

jQuery Steps and validation of multiple panels

jquery

jquery-validate

jquery-chosen

jquery-steps