JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<form id="myform" method="POST">
    <div class="control-group" style="padding-bottom: 40px;">
        <input id="shopping_request_min_price" name="shopping_request[min_price]" placeholder="at least...." />
        <input id="shopping_request_max_price" name="shopping_request[max_price]" placeholder="no more than..." />
        <div id="price_msg"></div>
        <input type="submit" />
    </div>
</form>

JavaScript

$(document).ready(function () {

    $('#myform').validate({
        groups: {
            minStrict: 'shopping_request[min_price] shopping_request[max_price]'
        },
        errorPlacement: function (error, element) {
            if ($(element).has('[name^="shopping_request"]')) {
                $('#price_msg').html(error);
            } else {
                error.insertAfter(element);
            }
        },
        rules: {
            "shopping_request[min_price]": {
                number: true,
                min: 0,
                minStrict: {
                    depends: function (element) {
                        return $("#shopping_request_max_price").val().length > 0 && $("#shopping_request_min_price").val().length > 0;
                    }
                }
            },
            "shopping_request[max_price]": {
                number: true,
                min: 0,
                minStrict: {
                    depends: function (element) {
                        return $("#shopping_request_max_price").val().length > 0 && $("#shopping_request_min_price").val().length > 0;
                    }
                }
            }
        },
        highlight: function (element) {
            $(element).closest(".control-group").removeClass("success").addClass("error").css('padding-bottom', '40px');
        },
        unhighlight: function (element) {
            $(element).closest(".control-group").addClass("success").removeClass("error").css('padding-bottom', '40px');
        },
        success: function (element) {
            element.text("OK!").addClass("valid");
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

    jQuery.validator.addMethod('minStrict', (function (value, el) {
        return +($("#shopping_request_min_price").val()) <= +($("#shopping_request_max_price").val());
    }), "Min price must be...