堆棧內存溢出
  簡體   English   中英

最小最大價格范圍驗證不適用於jquery.validate.js

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

 原文  2016-05-20 20:09:50  9   4    javascript/ jquery/ validation/ jquery-validate

問題描述

表單驗證我正在使用https://jqueryvalidation.org 。 我已經通過depends屬性實現了自定義驗證規則。

以下是驗證錯誤規則：

  • 如果未選中兩個價格框，則不會顯示錯誤。

  • 如果選擇了一個價格框（兩個中的一個），則驗證錯誤將顯示用戶需要同時選擇兩個。

  • 如果兩者都被選中，那么最大價格值必須大於最低價格。

請在下面找到我的代碼：

在我的代碼中，每個條件都令人滿意，但最后一條規則意味着最高價格總是大於最低價格不起作用。 它的檢查是正確的，但驗證不會觸發。

這里是jsfiddle鏈接 

$(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鏈接

4 個解決方案

解決方案1
 1 已采納  2016-05-23 07:32:46

您可以使用max和min規則來完成此操作。 這是小提琴 。

碼： 

$(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
 1  2016-05-26 15:43:03

對於必需的規則，方法是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>

解決方案3
 1  2016-05-27 09:37:37

成功運行您的要求請參閱此代碼和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');
    }
});

Live jsfiddle示例： https ：//jsfiddle.net/rajnikpatel/4hnxhmrs/

解決方案4
 0  2017-10-24 07:56:36

對於必需的規則，方法是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;
    }
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用jquery.validate.js插件進行條件表單驗證 jQuery.validate.js equalTo拒絕工作 如何包括jquery.validate.js文件（在本地目錄中）並在表單驗證中使用它？ HTML表單驗證（使用jquery.validate.js）在某些情況下不起作用 最低價格和最高價格以reactjs形式進行驗證 為什么jquery.validate.js會顯示兩次錯誤消息？ 我想在驗證js中驗證最大數量大於最小數量 使用 jquery.validate.min.js 進行表單驗證 驗證jquery設置max和min進行驗證 淘汰賽最小/最大驗證不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM