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

我尝试使用以下代码更改'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";
    }

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

为什么这些元素没有被改为可选？

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

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

Answer 1

为什么这些元素没有被改为可选？

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

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

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

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

true如果元素是＆＃34;不需要＆＃34;
false如果元素是＆＃34;必需＆＃34;

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

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

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

使用the .rules() method ...

设置并删除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
    });
});

我建议您查看文档：{{3}}

Jquery段验证最初只能起作用

1 个答案: