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

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

Answer 1

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

Answer 2

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>

Answer 3

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/