SO - 30841299

by Arun P Johny

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<form id="myform" method="post" action="">
    <div>
        <select name="d-1">
            <option></option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>
    <div>
        <select name="d-2">
            <option></option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>
    <input type="submit" value="Save" />
</form>

JavaScript

jQuery(function ($) {
    $('select[name="d-2"]').chosen()


    var validator = $('#myform').validate({
        ignore: [],
        rules: {
            'd-1': {
                required: true
            },
                'd-2': {
                required: true
            }
        },
        messages: {},
        errorPlacement: function (error, element) {
            //check whether chosen plugin is initialized for the element
            if (element.data().chosen) { //or if (element.next().hasClass('chosen-container')) {
                element.next().after(error);
            } else {
                element.after(error);
            }
        }
    });
});