最小最大价格范围验证不适用于 jquery.validate.js

我正在使用的表单验证https://jqueryvalidation.org https://jqueryvalidation.org。 我已经通过 dependent 属性实现了自定义验证规则。

以下是验证错误规则：

• 如果未选择两个价格框，则不会显示错误。

• 如果选择了一个价格框（两者之一），验证错误将显示用户需要选择两者。

• 如果两者都选择，则最大价格值必须大于最小价格。

请在下面找到我的代码：

在我的代码中，每个条件都满足，但最后一条规则意味着最高价格将始终大于最低价格，这是行不通的。它检查为真，但验证未触发。

here is jsfiddle 链接 http://jsfiddle.net/85wh1wwm/1/

$(document).ready(function() {
    $("#form1").validate({
        debug: true,
        onkeyup: false,
        onfocusout: false,
        onclick: false,
        rules: {
            minrange: {
                required: {
                    depends: function() {
                        var min_range = $("#min-range").find(':selected').val(),
                            max_range = $("#max-range").find(':selected').val();
                        if (min_range == "" && max_range == "") {
                            return false;
                        } else if (min_range != "" && max_range == "") {
                            return true;
                        } else if (min_range == "" && max_range != "") {
                            return true;
                        } else if (parseInt(max_range) < parseInt(min_range)) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            },
            maxrange: {
                required: {
                    depends: function() {
                        var min_range = $("#min-range").find(':selected').val(),
                            max_range = $("#max-range").find(':selected').val();
                        if (min_range == "" && max_range == "") {
                            return false;
                        } else if (min_range != "" && max_range == "") {
                            return true;
                        } else if (min_range == "" && max_range != "") {
                            return true;
                        } else if (parseInt(max_range) < parseInt(min_range)) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            },
        },
        submitHandler: function(formName, event) {
            alert("sucess");
        }
    });
});

here is jsfiddle 链接 http://jsfiddle.net/85wh1wwm/1/

您可以通过使用来做到这一点max https://jqueryvalidation.org/max-method and min https://jqueryvalidation.org/min-method规则。这里是fiddle http://jsfiddle.net/cassln/mv6szs83/1/.

Code:

$(document).ready(function() {
  var $min_range = $("#min-range"),
      $max_range = $("#max-range");

  $("#form1").validate({
    debug: true,
    onkeyup: false,
    onfocusout: false,
    onclick: false,
    rules: {
      minrange: {
        required: function() {
            return !($min_range.val() === "" && $max_range.val() === "");
        },
        max: function() {
          if ($max_range.val() !== "") {
            return $max_range.val();
          }
        }
      },
      maxrange: {
        required: function() {
            return !($min_range.val() === "" && $max_range.val() === "");
        },
        min: function() {
          if ($min_range.val() !== "") {
            return $min_range.val();
          }
        }
      }
    },
    submitHandler: function(formName, event) {
      alert("sucess");
    }
  });
});