SO - 17738096

by Vetrivel Samidurai

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js"></script>
<form id="quote"> <span class="label">When do you need service?</span>

    <br />
    <div id="inputSmall">
        <input type="text" class="small" name="serviceDate" />
    </div> <span class="label">How often?</span>

    <br />
    <div id="inputSmall">
        <select class="small" name="recurringBasis">
            <option value=""></option>
            <option value="single">One time</option>
            <option value="weekly">One a week</option>
        </select>
    </div>
    <input type="submit" value="Save" />
</form>

CSS

.error {
    color: red;
}

JavaScript

jQuery(function ($) {
    $("#quote").validate({
        rules: {
            serviceDate: "required",
            recurringBasis: "required"
        },
        highlight: function (element) {
            $(element).parent().prev().prev('span').addClass("error");
        },
        unhighlight: function (element) {
            $(element).parent().prev().prev('span').removeClass("error");
        }
    });

});