javascript – 最小最大价格范围验证不能与jquery.validate.js一起使用

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

以下是验证错误规则：

>如果两个价格框都没有选择错误就不会显示.
>如果选择一个价格框(两者之一),验证错误将显示用户需要同时选择两者.
>如果两者都被选中,则最大价格值必须大于最小价格.

请在下面找到我的代码：

在我的代码中,每个条件都令人满意,但最后一条规则意味着最大价格将始终大于最低价格不工作.它的检查是真的,但验证没有触发.

这里是jsfiddle link

$(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(),},submitHandler: function(formName,event) {
            alert("sucess");
        }
    });
});

这里是jsfiddle link

解决方法

您可以使用 max和 min规则执行此操作.这是 fiddle.

码：

$(document).ready(function() {
  var $min_range = $("#min-range"),$max_range = $("#max-range");
$("#form1").validate({
    debug: true,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();
          }
        }
      }
    },event) {
      alert("sucess");
    }
  });
});

原文地址：https://www.jb51.cc/jquery/152279.html