Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

javascript

jquery

validation

jquery-validate

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

like image 855
Arka Avatar asked May 20 '16 20:05

Arka

People also ask

How do you check if jQuery validate is working?

fn , so simply check whether it exists or not; if (typeof jQuery. fn. validationPlugin === "function") { // It's loaded } else { // It's not. }

What is valid () in jQuery?

valid()Returns: Boolean Description: Checks whether the selected form is valid or whether all selected elements are valid.

Does jQuery validate require a form?

The jquery validate plugin requires a form element to function, so you should have your form fields (no matter how few) contained inside a form. You can tell the validation plugin not to operate on form submission, then manually validate the form when the correct submit button is clicked.

What is jQuery validate unobtrusive JS?

An unobtrusive validation in jQuery is a set of ASP.Net MVC HTML helper extensions.By using jQuery Validation data attributes along with HTML 5 data attributes, you can perform validation to the client-side.

3 Answers

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");
    }
  });
});
like image 115
cassln Avatar answered Oct 18 '22 13:10

cassln

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>
like image 42
Yosvel Quintero Arguelles Avatar answered Oct 18 '22 15:10

Yosvel Quintero Arguelles

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/

like image 30
RAJNIK PATEL Avatar answered Oct 18 '22 13:10

RAJNIK PATEL

Sign in to Comment

Related questions

Generating Swagger YAML from JSDoc?
Saving PNG files with FileSaver.js
Redux reducer / state-shape design for dependent state-slices
Rails with Bootstrap Tabs
CKEditor Insert non editable HTML within style
GoogleMaps v3 autocomplete.getBounds() returns undefined after being set
LinkedIn Login with basic example not working
Require stylesheets and inject them to html as link tag with browserify
Getting Uncaught TypeError: fs.readdirSync is not a function when using Browserify with Nutritionix NodeJS client library
WebkitSpeechRecognition stops recording randomly
How to store credentials in an Outlook Add-in
Favicon won't show, seems to be issue with webpack
passport-facebook-token returns InternalOAuthError: Failed to fetch user profile when verifying the token
Get current value from datalist onhover
Uncaught Error: define cannot be used indirect
WebView Text Zoom Issue in Android
How to send message with nodemailer and email-templates?
ES6 on JavaScriptCore and React Native
Karma Error when update angular-route 1.5.0 to 1.5.1
How to join two event streams on a common event property?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!