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

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

#1楼 票数: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

  ask by hodale translate from so

未解决问题?本站智能推荐:

1回复

jQuery的multiselect验证仅在双击时有效

我有一个很奇怪的问题。 仅当我双击按钮单击时,才会触发我的验证消息。 我认为Bootstrap multiselect和jQuery插件存在一些已知问题。 请提出一些解决方法。 JS小提琴 这是代码。 jQuery的 我不确定如何引导环境。 让我知道如何对这个问题更清楚
2回复

jQuery验证插件仅在最后显示的div上有效

该问题与以下内容完全相同: 带有jQuery验证插件的jQuery显示/隐藏表单仅适用于最后显示的div 我试图验证我的表单是jQuery显示/隐藏表单。 jQuery validate插件仅在最后一个div(输入类型文件)上验证我的最后一个输入。 我目前可以上传图片并成功
1回复

jQuery验证(有效/无效)

我正在使用jquery validate插件来控制表单。 我的问题是如何通过复选框或单选按钮激活或停用验证插件? 默认模式下的表单由插件控制,用户可以选择停用表单控件。 再次感谢您分享您的知识!
1回复

jQuery验证仅在单击按钮时才有效,而不是onblur/onchange[重复]

这个问题已经在这里有了答案: 如何阻止jQuery验证自动进行验证? 2个答案 我有一个简单的表格和一个“保存”按钮。 我只想在用户单击按钮时使用JQuery验证插件来验证字段。 在用户单击“保存”按钮之前,我不希望错误消息出现或消失。 有什么办法吗?
4回复

jQuery验证-有效,但不“提交”

我有一个表单,可以很好地“点亮”验证消息,并在通过验证时将“保存”按钮更改为“正在加载...”。 都好。 但是,该表格永远不会提交。 我认为我缺少基本面。 如果它是我的验证器,请参考: }();
2回复

jQuery验证:表单有效后如何post()?

这有效: 这有效 但是我不知道如何让他们一起工作。 我希望仅在单击提交且表单有效的情况下,才能执行顶部代码中的内容。 我已经尝试了http://docs.jquery.com/Plugins/Validation/validate#toptions中的内容,但我想我没有。 我曾在某
1回复

为什么我没有包含库,但jquery远程验证仍然有效

尽管我没有在打开对话框的索引视图中包含那些库,但为什么jquery远程/验证在我的对话框中起作用?
1回复

jQuery:验证最初隐藏的字段

好的,这对我来说很难解释,但我会尽力而为。 我有一个表单,将其分为3个单独的步骤,以使用户更轻松地处理数据。 多亏了jQuery,我可以轻松地通过隐藏和显示dom中的元素来做到这一点,但是由于这个原因,jQuery难以验证最初隐藏的数据。 请查看以下表格: http : //jsfid