Range Validation with jQuery Validation Plugin

Sometimes you need to do client side validation based on other controls on the screen. Here is an example of how you can use the jQuery validation plugin to do dynamic range validation:

<style type="text/css">
  label.error { color: red; }
</style>

<form id="betweenForm" method="post" action="">
Change some values:<br/>
<label for="a">Field min:</label>
<input id="a" name="a" type="text" value="1" />

<br/>
<label for="b">Field max:</label>
<input id="b" name="b" type="text" value="100" />   
    
<br/>
<label for="c">Field between:</label>
<input id="c" class="required" name="c" type="text" value="" />

<p>
    <input class="submit" type="submit" value="Submit"/>
</p>
</form>

// Using jQuery Validation plugin    
    $("#betweenForm").validate({
        rules: {
            c: {
                required: true,
                min: function() {
                    return $('#a').val();
                },
                max: function() {
                    return $('#b').val();
                },
            }
        }
    });

The import part is to note how you can pass in an anonymous function instead of a static number for min and max.
View fiddle