JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<form id="theForm" action=""><div id="errorbox"><ul id="errorList"></ul></div>min:<input type="text" id="min" value="10" disabled="disabled" name="min"><br>
max:<input type="text" id="max" value="100" disabled="disabled" name="max"><br>
value:<input type="text" name="theValue" id="theValue" value=""><br>
    <input type="button" value="validate" id="validateButton"><input type="button" value="change min and max" id="changeValues"></form>

JavaScript

$(document).ready(function() {
    $.validator.addMethod("numericNowRange", function(value, element, params) {
        if (this.optional(element) || isNaN($(params[0]).val()) || isNaN($(params[1]).val())) {
            return true;
        } else if (isNaN(value)) {
            $.validator.messages.numericNowRange = "Please enter a valid number";
            return false;
        } else if (parseFloat(value) >= parseFloat($(params[0]).val()) && parseFloat(value) <= parseFloat($(params[1]).val())) {
            return true;
        } else {
            $.validator.messages.numericNowRange = "Please enter a number between " + $(params[0]).val() + " and " + $(params[1]).val();
            return false;
        }
    }, "Please enter a valid number in the range");
    $("#theForm").validate({
        rules: {
            "theValue": {
                "required": true,
                "numericNowRange": ["#min", "#max"]
            }
        },
        debug: true,
        errorLabelContainer: "#errorList",
        wrapper: "li",


        // the errorPlacement has to take the table layout into account
        unhighlight: function(element, errorClass, validClass) {
            $("#errorList:hidden").parent().hide();
            $(element.parent).removeClass("error");
            $(element.form).find("label[for=" + element.id + "]").parent().removeClass("error");
        },
        highlight: function(element, errorClass, validClass) {
            $(".errorbox").show();
            $(element).parent().addClass("error");
            $(element.form).find("label[for=" + element.id + "]").parent().addClass("error");
        }
    });
    $("#validate").click(function() {
        $("#theForm").validate().form();
    });
    $("#changeValues").click(function() {
        $("#min").val(parseInt($("#min").val()) + 1);
        $("#max").val(parseInt($("#max").val()) + 10);
        $("#theForm").validate().form();
    });
});