Jquery 段验证仅在最初有效

Question

我设置的是一个有两个主要部分的大表格。用户填写一些基本信息的第一部分。用户正在添加一些 'sizing' 选项的第二部分，可能有多个选项。尺寸信息在面板中填写，然后 'saved'，在其他地方克隆表格，然后擦除面板以添加另一个尺寸。当这个 'save' 发生时，我只对表单的那部分进行验证。

    $.validator.addMethod("pageRequired", function(value, element) {
        if (valid_distributions > 0) {
            $('#distributor-select').prop('required', false)
        }
        if (current_page == 1) {
            return this.optional(element);
        }else if (current_page == 2) {
            return !this.optional(element);
        } else {
        return "dependency-mismatch";
        }
    }, $.validator.messages.required)

这个chunk就是切换了表格前半部分的要求。基本上，我遇到了一些故障行为，有时我只能验证表单的底部，但有时 Jquery 被告知在仅保存底部时验证整个表单。

我知道元素是否需要的条件是触发，但它们仍然是必需的。

    var v = $("#beer-create-form").validate({
        debug: true,
        rules: {
                'keg_sizes[]': {
                        required: true
                }
        },
        messages: {
            'keg_sizes[]': 'Choose at least one keg size'
        },

        errorClass: "error",
        errorPlacement: function (error, element) {
            if (element.hasClass('kegsize-toggle')){
                error.insertAfter(element.parents().find('.distributor-name'));
            }else if (element.hasClass('price')) {
                console.log('price');
            }
        },
        highlight: function(element, errorClass) {
            $(element).addClass(errorClass);
        },
        unhighlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
        }
    });

    $(document).on('click', '.save-listing', function(e) {
        current_page = 1;
        if (v.form()) {             // if the form is valid, proceed to:
            saveBeerPanel();        //clones the panel being filled out with all the info
            wipeBeerPanel();        // clears all the info previously filled out so a new listing can be added
            valid_distributions += 1  // keeps track that there is at least one valid distribution
        }
        e.preventDefault();
    });

我尝试使用以下代码更改 'required' 开关：

    if (current_page == 1) {
        console.log('top is optional');
        return $(element).prop('required', false)
    }else if (current_page == 2) {
        return $(element).prop('required', true)
    } else {
    return "dependency-mismatch";
    }

...但这似乎没有帮助。

为什么这些元素没有更改为可选或不更改？

工作 fiddle 演示了表单应该如何工作： http://jsfiddle.net/hodale/0c41465t/

此外，这是我用来获取灵感的演示： http://jsfiddle.net/hodale/aqpyykt0/

Answer 1

Why are those elements not being changed to optional or not?

因为 .addMethod() 和 this.optional(element) 不应该改变任何东西。

The .addMethod() method 仅适用于 creating/evaluating 新的自定义规则。

.addMethod() 方法中的 this.optional(element) 仅用于帮助确定此自定义规则是否应忽略空字段。

this.optional(element) 仅 returns 布尔值...

true 如果元素是 "not required"
false 如果元素是 "required"

使用 .addMethod() 创建的 "pageRequired" 方法的整个前提毫无意义，应该删除。

要在特定元素上切换 required 规则，您可以执行以下操作之一...

切换元素上的 required class。
切换 HTML 5 属性，required="required"。

使用 the .rules() method...

设置和删除 required 规则

$('#myfield').rules('add', {  // add rules
    required: true
});

$('#myfield').rules('remove', 'required'); // remove rules

如果您一次 select 多个字段，则必须使用 jQuery .each()...

$('.myfields').each(function() {  // add rules to multiple field at once
    $(this).rules('add', {
        required: true
    });
});

我建议您查看文档：jqueryvalidation.org

Jquery 段验证仅在最初有效

Jquery segment validation only works initially

jquery

jquery-validate