Dropkick Validation

validate with jQuery validate :)

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="http://jamielottering.github.com/DropKick/js/jquery.dropkick.1-0.1.js"></script>
<link rel="stylesheet" href="http://jamielottering.github.com/DropKick/css/theme.css">
<fieldset>
    <form action="#" method="post" accept-charset="utf-8" class="example_form">              
        <p>
            <select name="country" id="a1" class="default required" tabindex="2">
                <option value="">Try Me!</option>
                <option value="AU">Australia</option>
                <option value="CA">Canada</option>
                <option value="DE">Germany</option>
                <option value="JP">Japan</option>
                <option value="GB">United Kingdom</option>
                <option value="US">United States</option>
            </select>
             <select name="locationofbusiness" id="a2" class="default required" tabindex="2">
						  <option value="">Select State</option>
						  <option value="1">AK</option>
						  <option value="2">AL</option>
						  <option value="3">AR</option>
						  <option value="4">AZ</option>
						  <option value="5">CA</option>
						  <option value="6">CO</option>
					 </select>
        </p>
        <p style="clear: both">
            <input type="submit" name="submit" value="Submit" />
        </p>
    </form>
</fieldset>

CSS

select {
   display: block!important;
}

.dk_container.error {
    border: 1px solid red;
}

label.error {
    display: none!important;
}
.dk_fouc select {
    position: absolute;
    visibility: hidden;
}

JavaScript

/**
* Dependencies; 
* jquery.validate 
*   http://docs.jquery.com/Plugins/Validation/validate
* jquery.dropkick
*   http://jamielottering.github.com/DropKick
**/
$(document).ready(function () {
    $('.default').dropkick();
    $('.example_form').validate({
        highlight: function (element, errorClass) {   
             $(element).prev().addClass('error');
             //$(element).prev().addClass('error'); 
             $('.dk_toggle').css('border', 'none');
        },
        unhighlight: function(element, errorClass) {
            $(element).prev('.dk_container').removeClass('error');  
            $('.dk_toggle').css('border', '1px solid #ccc');
        }
    });
    
    
    ////Test
    $("#a2").append("<option value='77'>TEST</option>");
    $("#a2").append("<option value='78'>TEST2</option>");
});