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

Posted

技术标签:

【中文标题】最小最大价格范围验证不适用于 jquery.validate.js【英文标题】：min max price range validation not working with jquery.validate.js 【发布时间】：2016-09-18 05:06:23 【问题描述】：

我正在使用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(),
                            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

【问题讨论】：

卫生署！ ;) 没关系...在 5 分钟内删除.. 你好，@Arka 请看我的代码它工作正常.. :) 【参考方案1】：

您可以通过使用max 和min 规则来做到这一点。这是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");
    
  );
);

【讨论】：

【参考方案2】：

对于required，规则是validateRequiredBoth() 方法，对于min 和max，您可以配置需要参数的规则以及depends 回调。

还修改了选择字段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">$10,000</option>
        <option value="20000">$20,000</option>
        <option value="50000">$50,000</option>
        <option value="75000">$75,000</option>
        <option value="100000">$100,000</option>
        <option value="125000">$125,000</option>
        <option value="150000">$150,000</option>
        <option value="175000">$175,000</option>
        <option value="200000">$200,000</option>
        <option value="300000">$300,000</option>
        <option value="500000">$500,000</option>
        <option value="750000">$750,000</option>
        <option value="1000000">$1M</option>
        <option value="1500000">$1.5M</option>
        <option value="2000000">$2M</option>
        <option value="2500000">$2.5M</option>
        <option value="3000000">$3M</option>
        <option value="3500000">$3.5M</option>
        <option value="4000000">$4M</option>
        <option value="4500000">$4.5M</option>
        <option value="5000000">$5M</option>
        <option value="10000000">$10M+</option>
    </select>
    <br/>
    Max price:
    <select class="form-control form-control-all" id="max-range" name="maxrange">
        <option value="">Max</option>
        <option value="10000">$10,000</option>
        <option value="20000">$20,000</option>
        <option value="50000">$50,000</option>
        <option value="75000">$75,000</option>
        <option value="100000">$100,000</option>
        <option value="125000">$125,000</option>
        <option value="150000">$150,000</option>
        <option value="175000">$175,000</option>
        <option value="200000">$200,000</option>
        <option value="300000">$300,000</option>
        <option value="500000">$500,000</option>
        <option value="750000">$750,000</option>
        <option value="1000000">$1M</option>
        <option value="1500000">$1.5M</option>
        <option value="2000000">$2M</option>
        <option value="2500000">$2.5M</option>
        <option value="3000000">$3M</option>
        <option value="3500000">$3.5M</option>
        <option value="4000000">$4M</option>
        <option value="4500000">$4.5M</option>
        <option value="5000000">$5M</option>
        <option value="10000000">$10M+</option>
    </select>
    <br/>
    <input type="submit">
</form>

【讨论】：

嗨@Arka，回答了你的问题..你能检查一下吗？【参考方案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">$10,000</option>
                <option value="20000">$20,000</option>
                <option value="50000">$50,000</option>
                <option value="75000">$75,000</option>
                <option value="100000">$100,000</option>
                <option value="125000">$125,000</option>
                <option value="150000">$150,000</option>
                <option value="175000">$175,000</option>
                <option value="200000">$200,000</option>
                <option value="300000">$300,000</option>
                <option value="500000">$500,000</option>
                <option value="750000">$750,000</option>
                <option value="1000000">$1M</option>
                <option value="1500000">$1.5M</option>
                <option value="2000000">$2M</option>
                <option value="2500000">$2.5M</option>
                <option value="3000000">$3M</option>
                <option value="3500000">$3.5M</option>
                <option value="4000000">$4M</option>
                <option value="4500000">$4.5M</option>
                <option value="5000000">$5M</option>
                <option value="10000000">$10M+</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">$10,000</option>
                <option value="20000">$20,000</option>
                <option value="50000">$50,000</option>
                <option value="75000">$75,000</option>
                <option value="100000">$100,000</option>
                <option value="125000">$125,000</option>
                <option value="150000">$150,000</option>
                <option value="175000">$175,000</option>
                <option value="200000">$200,000</option>
                <option value="300000">$300,000</option>
                <option value="500000">$500,000</option>
                <option value="750000">$750,000</option>
                <option value="1000000">$1M</option>
                <option value="1500000">$1.5M</option>
                <option value="2000000">$2M</option>
                <option value="2500000">$2.5M</option>
                <option value="3000000">$3M</option>
                <option value="3500000">$3.5M</option>
                <option value="4000000">$4M</option>
                <option value="4500000">$4.5M</option>
                <option value="5000000">$5M</option>
                <option value="10000000">$10M+</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/

【讨论】：

【参考方案4】：

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

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的主要内容，如果未能解决你的问题，请参考以下文章

jQuery .val() 不适用于 jQueryUI 自动完成功能

KNN 分类器算法不适用于所有情况

Azure搜索：价格范围 - 最小值和最大值计算

如果不满足最小最大范围，则在模态对话框中输入文本验证提示

如何使用范围数据注释属性指定最小但没有最大小数？

用于在 varchar 字段中选择最小/最大值的 Mysql 查询