jQuery Validate Plugin - Demo

by naveen

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>
<form id="ContactForm">
    <fieldset>
        <legend>Contact</legend>        
        <p>
            <label for="minPop">minimum</label>
            <input type="text" id="minPop" name="minPop" />
        </p>
        <p>
            <label for="maxPop">maximum</label>
            <input type="text" id="maxPop" name="maxPop" />
        </p>
        <p>
            <label for="minRank">min Rank</label>
            <input type="text" id="minRank" name="minRank" />
        </p>
        <p>
            <label for="maxMozRank">max Rank</label>
            <input type="text" id="maxRank" name="maxRank" />
        </p>
        <br />
        <div>
            <label></label>
            <input type="submit" value="Filter" />
            <input type="reset" value="Reset" class="cancel" />
        </div>
    </fieldset>
</form>

CSS

p{
    margin-bottom: 5px;    
}
label{
    display: inline-block;
    width: 65px;
}
input{
    padding: 2px 5px;
    width: 100px;
}
label.error{
    color:#f00;
    margin-left: 5px;
    width: 300px;
}
label.error:before{
    content: '* ';
}

JavaScript

$('#ContactForm').validate({
    rules: {
        minPop: {
            required: true,
            minlength: 1,
            maxlength: 3,
            digits: true,
            range: [0, 999]
        },
        maxPop: {
            required: true,
            minlength: 1,
            maxlength: 3,
            digits: true,
            range: [0, 999]
        },
        minRank: {
            required: true,
            minlength: 1,
            maxlength: 3,
            digits: true,
            range: [0, 999]
        },
        maxRank: {
            required: true,
            minlength: 1,
            maxlength: 3,
            digits: true,
            range: [0, 999]
        }
    },
    messages: {
        minPop: {
            required: "Please enter a minimum.",
            minlength: "Your entry must have at minimum 1 character (lowest is 0).",
            maxlength: "Your entry must have maximum 3 characters (top is 999).",
            digits: "Please only enter integer values.",
            range: "Please enter a number between 0 and 999"
        },
        maxPop: {
            required: "Please enter a minimum.",
            minlength: "Your entry must have at minimum 1 character (lowest is 0).",
            maxlength: "Your entry must have maximum 3 characters (top is 999).",
            digits: "Please only enter integer values.",
            range: "Please enter a number between 0 and 999"
        },
        minRank: {
            required: "Please enter a minimum.",
            minlength: "Your entry must have at minimum 1 character (lowest is 0).",
            maxlength: "Your entry must have maximum 3 characters (top is 999).",
            digits: "Please only enter integer values.",
            range: "Please enter a number between 0 and 999"
        },
        maxRank: {
            required: "Please enter a minimum.",
            minlength: "Your entry must have at minimum 1 character (lowest is 0).",
            maxlength: "Your entry...