stackoom
  简体   繁体   中英

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

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

Question

form validation i'm using https://jqueryvalidation.org . I have implemented custom validation rules through depends property.

following are validation error rules:

  • if both price box is not selected error won't show.

  • if one price box (one out of both) selected ,validation error will show that user needs to select both.

  • if both are selected, then max price value must be greater than min price .

please find below my code:

in my code every condition is satisfying but the last rule means max price will be always greater than min price is not working. Its checking true but validation is not triggering.

here is 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");
        }
    });
});

here is jsfiddle link

4 answers

solution1
 1 ACCPTED  2016-05-23 07:32:46

You can do this by using max and min rules. Here is the fiddle .

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

solution2
 1  2016-05-26 15:43:03

For required rule is the method validateRequiredBoth() and for min and max you can configure a rule that requires a parameter, along with a depends callback.

Also modified select fields minrange and maxrange .

Here is the code: 

 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>

solution3
 1  2016-05-27 09:37:37

Successfully run with your requirement please see this code and jsfiddle :

Note : don't forgot to add JS files in your page

HTML Code: 

<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 Code : 

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 Example : https://jsfiddle.net/rajnikpatel/4hnxhmrs/

solution4
 0  2017-10-24 07:56:36

For required rule is the method CheckValidate(FormName) and for min and max you can configure a rule that requires a parameter 

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;
    }
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question conditional form validation using jquery.validate.js plugin jQuery.validate.js equalTo refuses to work How to include jquery.validate.js file (in the local directory) and use it in the validation of form? html form validation (with jquery.validate.js) in some cases doesn't work min price and max price validation in reactjs form Why does jquery.validate.js show error messages twice? I want to validate max quanity is greater then min qty in validation js Form validation using jquery.validate.min.js validate jquery setting max and min for validate Knockout min/max validation not working
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM