Chosen-select validation

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://lysik.pl/public/chosen.css">
<script src="http://lysik.pl/public/chosen.jquery.js"></script>
<form id="my-form">
    <div class='with-select'>
        <span>Chosen select:</span>
        <select class="chosen-select" required="true">
            <option value="">[select option]</option>
            <option value="01">Value 1</option>
            <option value="02">Value 2</option>
            <option value="03">Value 3</option>
            <option value="04">Value 4</option>
            <option value="05">Value 5</option>
        </select>
    </div>
    <div>
        <input type="submit" />
    </div>
</form>

CSS

.error {
    color: red;
}
span {
    display: inline-block;
    width: 150px;
}
input, select {
    width: 150px;
}
.with-select > span,
.with-select > label.error {
    vertical-align: top;
    margin-top: 5px;
    display: inline-block;
}

JavaScript

// Chosen validation
$('.chosen-select').chosen();
$.validator.setDefaults({ ignore: ":hidden:not(select)" });

// validation of chosen on change
if ($("select.chosen-select").length > 0) {
    $("select.chosen-select").each(function() {
        if ($(this).attr('required') !== undefined) {
            $(this).on("change", function() {
                $(this).valid();
            });
        }
    });
}

// validation
$('#my-form').validate({
    errorPlacement: function (error, element) {
        console.log("placement");
        if (element.is("select.chosen-select")) {
            console.log("placement for chosen");
            // placement for chosen
            element.next("div.chzn-container").append(error);
        } else {
            // standard placement
            error.insertAfter(element);
        }
    }
});