Question

我有一个表单，其中有部分拆分为标签。当用户提交表单时，应该验证整个表单（即输入有焦点并按Enter键或按下保存按钮），我想验证选项卡单击事件的第一个选项卡上的元素（显然，除了第一个之外，在第一个选项卡的元素被验证之前禁止移动到另一个选项卡。我似乎继续遇到的问题是，在第一次尝试验证任何内容之后，设置了要验证的规则和元素，并且不会根据传递的不同规则集进行更新。

编辑：只是为了澄清，如果你点击Tab 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>

Answer 1

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

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

.validate()只是插件的初始化方法。您无法重复调用更新规则，因为只使用了第一个调用，并且忽略了所有后续调用。预期的用途是，.validate()将在DOM上为调用，可用于任何一种特定表单。

然后，如果您需要动态更改规则，则可以使用the .rules('add') method。这可能看起来违反直觉，因为您可能没有“添加”，但这是唯一可用的方法。简单地用新参数和/或消息覆盖规则是典型的用法。要完全删除规则，请使用.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/

jQuery Validator插件不会更新规则

1 个答案: