Jquery 验证插件组取决于自定义函数

Question

我正在尝试使用 JQuery 验证器插件让最低价格和最高价格字段正常工作。这两个字段都不是必需的，用户可以在其中一个字段中输入数字但是，当两个字段都有值时，我想确保最小值字段小于或等于最大值字段。

当我点击提交按钮时有效，但使用内联编辑时无效。

这是我对 HTML 的看法：

<form id="myform" method="POST">
    <div class="control-group" style="padding-bottom: 40px;">
        <input id="shopping_request_min_price" name="shopping_request[min_price]" placeholder="at least...." />
        <input id="shopping_request_max_price" name="shopping_request[max_price]" placeholder="no more than..." />
        <div id="price_msg"></div>
        <input type="submit" />
    </div>
</form>

这是我的脚本：

    $('#myform').validate({
    groups: {
        minStrict: ' "shopping_request[min_price]" "shopping_request[max_price]" '
    },
    errorPlacement: function (error, element) {
        if (element.attr("name") === "shopping_request[min_price]" || element.attr("name") === "shopping_request[max_price]") {
            return error.replaceAll($('#price_msg'));
        } else {
            return error.insertAfter($element);
        }
    },
    rules: {
        "shopping_request[min_price]": {
            number: true,
            min: 0,
            minStrict: {
                depends: function (element) {
                    return $("#shopping_request_max_price").val().length > 0 && $("#shopping_request_min_price").val().length > 0;
                }
            }
        },
            "shopping_request[max_price]": {
            number: true,
            min: 0,
            minStrict: {
                depends: function (element) {
                    return $("#shopping_request_max_price").val().length > 0 && $("#shopping_request_min_price").val().length > 0;
                }
            }
        }
    },
    highlight: function (element) {
        return $(element).closest(".control-group").removeClass("success").addClass("error").css('padding-bottom', '40px');
    },
    success: function (element) {
        return element.text("OK!").addClass("valid").closest(".control-group").removeClass("error").addClass("success").css('padding-bottom', '40px');
    }
});

jQuery.validator.addMethod('minStrict', (function (value, el) {
    return +($("#shopping_request_min_price").val()) <= +($("#shopping_request_max_price").val());
}), "Min price must be less than or equal to max price");

这是JSFiddle

谁能帮我弄清楚我做错了什么或应该做什么？

提前致谢！

Answer 1

Can anyone help me figure out what I'm doing wrong or should be doing?

我认为您可能误解了 groups 选项。它用于将来自两个或多个字段的错误消息合并为一个。它不是 rule/method，也与验证无关。

在您的情况下，groups 选项已损坏，因为您的字段名称有方括号，需要用引号括起来。由于您的自定义 errorPlacement 函数，它似乎才有效。

It works when I click the submit button but not with the inline editing.

不完全是。请注意，如果您单击到另一个字段并单击返回，那么它也会触发一条新消息。

正在修复您的 groups 选项...

groups: {
    minStrict: 'shopping_request[min_price] shopping_request[max_price]'
},

正在修复你的 errorPlacement 现在 groups 工作正常...

errorPlacement: function (error, element) {
    if ($(element).has('[name^="shopping_request"]')) {
        $('#price_msg').html(error); // put the message in your div
    } else {
        error.insertAfter(element); // default
    }
},

当使用 highlight 做一些错误时，你可以使用 unhighlight 在错误被清除后撤消它。稍微修改一下...

 highlight: function (element) {
    $(element).closest(".control-group").removeClass("success").addClass("error").css('padding-bottom', '40px');
},
unhighlight: function (element) {
    $(element).closest(".control-group").addClass("success").removeClass("error").css('padding-bottom', '40px');
},
success: function (element) {
    element.text("OK!").addClass("valid");
},

注意：您不需要在这些回调函数中的每个 jQuery 行前面放置 return。 return 仅在某些情况下使用。

好的，现在可以正常使用了，但是还是需要点击字段外才能触发验证...

https://jsfiddle.net/uvw5qjyw/8/

这是因为您的 depends。 minStrict 规则未被评估，因为 depends 表示它尚未激活。您必须在该字段外单击才能在评估之前激活此规则。

解决此问题的方法是在每次键入时使用 .valid() 强制重新验证。

$('[name^="shopping_request"]').on('keyup', function() {
    $(this).valid();
});

演示：https://jsfiddle.net/uvw5qjyw/10/

注意：由于在 jQuery 验证插件之前包含 additional-methods.js 文件，您还遇到了控制台错误。它需要在后面。

Jquery 验证插件组取决于自定义函数

Jquery Validation Plugin groups depends custom function

jquery

jquery-validate