jQuery段验证仅在最初有效

Question

我设置的是一个具有两个主要部分的大型表单。 用户的第一部分是填写一些基本信息。 用户在第二部分添加了一些“大小调整”选项，这些选项可能是多个选项。 大小信息将在面板中填写，然后“保存”，将表单克隆到其他位置，然后擦面板以添加其他尺寸。 发生“保存”时，我仅对表单的该部分进行验证。

    $.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)

这个块改变了表格前半部分的要求。 基本上，我遇到了一些小问题，有时候我可以只验证表单的底部，但是有时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();
    });

我尝试使用以下代码更改“必需”开关：

    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";
    }

...但这似乎无济于事。

为什么不将这些元素更改为可选元素？

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

另外，这是我用来启发的演示： http : //jsfiddle.net/hodale/aqpyykt0/

Answer 1

为什么不将这些元素更改为可选元素？

因为.addMethod()和this.optional(element)不应更改任何内容。

.addMethod()方法仅用于创建/评估新的自定义规则。

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

this.optional(element) 仅返回一个布尔值...

• 如果元素为“不需要”，则为true
• 如果该元素是“必需”，则返回false

---

用.addMethod()创建的"pageRequired"方法的整个前提没有任何意义，应将其删除。

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

1. 在元素上切换required类。

2. 切换HTML 5属性， required="required" 。

3. 使用.rules()方法设置和删除required规则...

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

   如果一次选择多个字段，则必须使用jQuery .each() ...。

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

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