Question

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

单击提交按钮但不使用内联编辑时，它可以正常工作。

以下是我对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

任何人都可以帮我弄清楚我做错了什么或应该做什么？

我想你可能误解了groups选项。它用于将来自两个或多个字段的错误消息合并为一个。它不是规则/方法，也不与验证有任何关系。

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

单击提交按钮但不使用内联编辑时，它可以正常工作。

不完全。请注意，如果您单击其他字段并单击“返回”，则它还会触发新消息。

修复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");
},

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

好的，现在它正常工作，但您仍然需要点击该字段才能触发验证......

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

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

解决方法是每次键入时强制使用.valid()进行重新验证。

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

DEMO：https://jsfiddle.net/uvw5qjyw/10/

注意：由于在jQuery Validate插件之前包含additional-methods.js文件，也导致了控制台错误。它需要追求。

Jquery Validation插件组依赖于自定义功能

1 个答案: