1

我有一个表格，其中部分分为选项卡。当用户提交表单时（即输入具有焦点并且他们按下回车键或按下保存按钮），应该验证整个表单，并且我想在选项卡的单击事件上验证第一个选项卡上的元素（显然不是第一个）在第一个选项卡的元素被验证之前不允许移动到另一个选项卡。我似乎继续遇到的问题是，在第一次尝试验证任何内容之后，要验证的规则和元素都已设置，并且不会根据传递一组不同的规则而更新。

编辑：为了澄清，如果您单击选项卡 2，然后填写文本 1 和文本 2 并点击保存，您可以更清楚地看到问题，然后执行完全相反的操作。

非常感谢您对此事的任何想法。提前致谢！

这一切都基于这里的 jquery validate 插件：http: //jqueryvalidation.org/

这是小提琴的链接：http: //jsfiddle.net/Fsb69/

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript">
        var log = function(msg) {
            $('ul#log').append('<li>'+msg+'</li>');
        },
        validate_form = function(elements) {
            var params = {
                errorLabelContainer: '#message-error',
                ignore: [],
                wrapper: 'li',
                onfocusout: false,
                onkeyup: false,
                rules: {
                    text_1: 'required',
                    text_2: 'required',
                    text_3: 'required',
                    text_4: 'required',
                },
                debug:true
            };
            if(elements) {
                $.each(params.rules, function(k, v) {
                    if($.inArray(k, elements) < 0) {
                        delete params.rules[k];
                    }
                });
            }
            log('params: '+JSON.stringify(params));
            return $('form[name=test-form]').validate(params).form();
        };
        $(function() {
            $('span.tab-click').click(function() {
                var self = $(this),
                selected = self.prop('id').replace('-click', ''),
                selected_index = selected.replace('tab-', ''),
                elements = ['text_1', 'text_2'];
                valid = true;
                if(selected_index > 1) {
                    var valid = validate_form(elements);
                    log('is valid? '+valid);
                }
                if(!valid) {
                    return false;
                }
                $('div.tab').hide();
                $('div#'+selected).show();
            });
            $('form[name=test-form]').submit(function(e) {
                var form = $(this);
                e.preventDefault();
                var is_valid = validate_form(false);
                log('is valid? '+is_valid);
                if(is_valid) {
                    log('success');
                    $('#message-error').empty().append('<li>Form is validated.</li>');
                }
            });
        });
    </script>
    <style>
        form span {
            text-decoration: underline;
            color: blue;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form name="test-form">
        <span id="tab-click-1" class="tab-click">Tab 1</span> | <span id="tab-click-2" class="tab-click">Tab 2</span><br /><br />
        <div class="tab" id="tab-1">
            <label for="text_1">Text 1</label><input name="text_1" value="" /><br />
            <label for="text_2">Text 2</label><input name="text_2" value="" /><br />
        </div>
        <div class="tab" id="tab-2" style="display:none;">
            <label for="text_3">Text 3</label><input name="text_3" value="" /><br />
            <label for="text_4">Text 4</label><input name="text_4" value="" /><br />
        </div>
        <ul style="display:none; list-style-type: none;" id="message-error"></ul>
        <button type="submit">Save</button>
    </form>
    <h4>Log</h4>
    <ul id="log"></ul>
</body>
</html>
4

1 回答 1

4

标题： “jQuery Validator 插件不会更新规则”

您的根本问题是您处理.validate()呼叫的方式不正确。

.validate()只是插件的初始化方法。您不能重复调用它来更新规则，因为只使用第一个调用，而忽略所有后续调用。预期的用法是在 DOM.validate()上调用一次，为任何一种特定形式做好准备。

然后稍后如果您需要动态更改规则，您将使用该.rules('add')方法。这似乎违反直觉，因为您可能没有“添加”，但这是唯一可用的方法。简单地用新参数和/或消息覆盖规则是典型的用法。要完全删除规则，请使用该.rules('remove')方法。当一次将此方法应用于多个元素时，您必须将其包装在 jQuery.each()中。

$('input[name^="field_"]').each(function() {
    $(this).rules('remove');
});

rules()方法的简单演示：http : //jsfiddle.net/7EE5K/

另外，请参阅此答案以获取有关如何在将表单拆分为步骤或部分时验证表单的简单示例： https ://stackoverflow.com/a/18407211/594235

多步骤表单的简单演示：http : //jsfiddle.net/N9UpD/

于 2013-08-23T20:56:06.733 回答