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

Question

我正在使用 https://jqueryvalidation.org 表单验证。我已经通过 depends 属性.

实现了自定义验证规则

验证错误规则如下：

如果两个价格框都不是 selected 错误将不会显示。
如果一个价格框（两个中的一个）selected，验证错误将显示用户需要select两个。
如果两者都是 selected，则最高价格值必须大于最低价格。

请在下面找到我的代码：

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

$(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");
        }
    });
});

这里是jsfiddle link

Answer 1

您可以使用 max and min rules. Here is the fiddle 来完成此操作。

代码：

$(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");
    }
  });
});

Answer 2

对于 required rule is the method validateRequiredBoth() and for min and max，您可以配置需要参数的规则以及 depends 回调。

还修改了 select 个字段 minrange 和 maxrange。

代码如下：

var $min = $('#min-range'),
    $max = $('#max-range');

function getNumber(num) {
    var intNum = parseInt(num);
    return !isNaN(intNum) ? intNum : 0;
}

function getMin() {
    return getNumber($min.find('option:selected').val());
}

function getMax() {
    return getNumber($max.find('option:selected').val());
}

function validateRequiredBoth() {
    return !(getMin() === 0 && getMax() === 0);
}

$('#form1').validate({
    debug: true,
    onkeyup: false,
    onfocusout: false,
    onclick: false,
    rules: {
        minrange: {
            required: function() {
                return validateRequiredBoth();
            },
            max: {
                param: function() {
                    return getMax();
                },
                depends: function() {
                    return getMax() > 0 && getMin() > getMax();
                }
            }
        },
        maxrange: {
            required: function() {
                return validateRequiredBoth();
            },
            min: {
                param: function() {
                    return getMin();
                },
                depends: function() {
                    return getMin() > getMax();
                }
            }
        }
    },
    submitHandler: function(formName, event) {
        alert('sucess');
    }
});

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<form id="form1" name="form1"> 
    Min price:
    <select class="form-control form-control-all" id="min-range"name="minrange">
        <option value="">Min</option>
        <option value="10000">,000</option>
        <option value="20000">,000</option>
        <option value="50000">,000</option>
        <option value="75000">,000</option>
        <option value="100000">0,000</option>
        <option value="125000">5,000</option>
        <option value="150000">0,000</option>
        <option value="175000">5,000</option>
        <option value="200000">0,000</option>
        <option value="300000">0,000</option>
        <option value="500000">0,000</option>
        <option value="750000">0,000</option>
        <option value="1000000">M</option>
        <option value="1500000">.5M</option>
        <option value="2000000">M</option>
        <option value="2500000">.5M</option>
        <option value="3000000">M</option>
        <option value="3500000">.5M</option>
        <option value="4000000">M</option>
        <option value="4500000">.5M</option>
        <option value="5000000">M</option>
        <option value="10000000">M+</option>
    </select>
    <br/>
    Max price:
    <select class="form-control form-control-all" id="max-range" name="maxrange">
        <option value="">Max</option>
        <option value="10000">,000</option>
        <option value="20000">,000</option>
        <option value="50000">,000</option>
        <option value="75000">,000</option>
        <option value="100000">0,000</option>
        <option value="125000">5,000</option>
        <option value="150000">0,000</option>
        <option value="175000">5,000</option>
        <option value="200000">0,000</option>
        <option value="300000">0,000</option>
        <option value="500000">0,000</option>
        <option value="750000">0,000</option>
        <option value="1000000">M</option>
        <option value="1500000">.5M</option>
        <option value="2000000">M</option>
        <option value="2500000">.5M</option>
        <option value="3000000">M</option>
        <option value="3500000">.5M</option>
        <option value="4000000">M</option>
        <option value="4500000">.5M</option>
        <option value="5000000">M</option>
        <option value="10000000">M+</option>
    </select>
    <br/>
    <input type="submit">
</form>

Answer 3

成功运行满足您的要求，请参阅此代码和 jsfiddle :

注意：不要忘记在页面中添加 JS 文件

HTML代码：

<form id="form1" name="form1">
            Min price:
            <select class="form-control form-control-all" id="min-range" data-name="Price Range Min" name="minrange" title="Min price is required" aria-required="true">
                <option value="">Min</option>
                <option value="10000">,000</option>
                <option value="20000">,000</option>
                <option value="50000">,000</option>
                <option value="75000">,000</option>
                <option value="100000">0,000</option>
                <option value="125000">5,000</option>
                <option value="150000">0,000</option>
                <option value="175000">5,000</option>
                <option value="200000">0,000</option>
                <option value="300000">0,000</option>
                <option value="500000">0,000</option>
                <option value="750000">0,000</option>
                <option value="1000000">M</option>
                <option value="1500000">.5M</option>
                <option value="2000000">M</option>
                <option value="2500000">.5M</option>
                <option value="3000000">M</option>
                <option value="3500000">.5M</option>
                <option value="4000000">M</option>
                <option value="4500000">.5M</option>
                <option value="5000000">M</option>
                <option value="10000000">M+</option>
            </select>


            <br /> Max price:

            <select class="form-control form-control-all" id="max-range" data-name="Price Range Max" name="maxrange" title="Max price is required" aria-required="true">
                <option value="">Max</option>
                <option value="10000">,000</option>
                <option value="20000">,000</option>
                <option value="50000">,000</option>
                <option value="75000">,000</option>
                <option value="100000">0,000</option>
                <option value="125000">5,000</option>
                <option value="150000">0,000</option>
                <option value="175000">5,000</option>
                <option value="200000">0,000</option>
                <option value="300000">0,000</option>
                <option value="500000">0,000</option>
                <option value="750000">0,000</option>
                <option value="1000000">M</option>
                <option value="1500000">.5M</option>
                <option value="2000000">M</option>
                <option value="2500000">.5M</option>
                <option value="3000000">M</option>
                <option value="3500000">.5M</option>
                <option value="4000000">M</option>
                <option value="4500000">.5M</option>
                <option value="5000000">M</option>
                <option value="10000000">M+</option>
            </select>
            <br />
            <input type="submit">
        </form>

JS代码：

var $min = $('#min-range'),
    $max = $('#max-range');

function getNumber(num) {
    var intNum = parseInt(num);
    return !isNaN(intNum) ? intNum : 0;
}

function getMin() {
    return getNumber($min.find('option:selected').val());
}

function getMax() {
    return getNumber($max.find('option:selected').val());
}

function validateRequiredBoth() {
    if (getMin() == "" && getMax() == "") {
        return true;
    } else if (getMin() == "" && getMax() != "") {
        return true;
    } else if (getMin() != "" && getMax() == "") {
        return true;
    } else {
        return false;
    }
}

$('#form1').validate({
    debug: true,
    onkeyup: false,
    onfocusout: false,
    onclick: false,
    rules: {
        minrange: {
            required: function () {
                return validateRequiredBoth();
            },
            max: {
                param: function () {
                    return getMax();
                },
                depends: function () {
                    return getMax() > 0 && getMin() > getMax();
                }
            }
        },
        maxrange: {
            required: function () {
                return validateRequiredBoth();
            },
            min: {
                param: function () {
                    return getMin();
                },
                depends: function () {
                    return getMin() > getMax();
                }
            }
        }
    },
    submitHandler: function (formName, event) {
        alert('sucess');
    }
});

实时 jsfiddle 示例：https://jsfiddle.net/rajnikpatel/4hnxhmrs/

Answer 4

对于必需的规则是方法 CheckValidate(FormName)，对于最小值和最大值，您可以配置一个需要参数的规则

function CheckValidate(FormName) {
    try{
        //if (!flag)
        //    return false;
        var flag2 = true;
        $('#' + FormName + ' input[data-minlength][data-maxlength]').each(function () {
            var x = this.id;
            var dataminlength = this.attributes['data-minlength'].value;
            var datamaxlength = this.attributes['data-maxlength'].value;
            if (this.value.length < dataminlength || this.value.length > datamaxlength) {
                $('#' + x).css("background-color", "#f8e8e8").css("border", "1px solid red");
                $('#lblValidationSummary').append('حداقل و حداکثر تعداد کاراکتر مجاز برای  ' + this.attributes['placeholder'].value + ' باید بین  ' + dataminlength + ' تا ' + datamaxlength + ' باشد' + '<br/>');
                flag = false;
                flag2 = false;
            }
            else {
                $('#' + x).css("background-color", "#fff").css("border", "1px solid gray");
            }
        });
        //if (!flag)
        //    return false;

        return flag;
    }
    catch(err)
    {
        alert(err);
        return false;
    }
}

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

min max price range validation not working with jquery.validate.js

javascript

validation

jquery

jquery-validate