jquery.chosen + jquery.validation

by andres descalzo

HTML

<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
<script src="http://harvesthq.github.com/chosen/chosen/chosen.jquery.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></script>
<form method="post" id="form1" action="">
    <fieldset>
        <legend>Login Form</legend>
        <div>
            <label>datos</label>
            <select name="data-select" title="data-select is required" class="chzn-select {required:true}" style="width:150px;">
                <option></option>
                <option value="1">uno</option>
                <option value="2">dos</option>
            </select>
        </div>
        <div>
            <label for="phone">Phone</label>
            <input id="phone" name="phone" class="some styles {required:true,number:true, rangelength:[2,8]}" />
        </div>
        <div>
            <label for="email">Email</label>
            <input id="email" name="email" class="{required:true,email:true}">
        </div>
        
        <div class="error"></div>
        <div>
            <input type="submit" value="enviar datos"/>
        </div>
    </fieldset>
</form>

JavaScript

$(function() {

    var $form = $("#form1");
    
    $(".chzn-select").chosen({no_results_text: "No results matched"});
    $form.validate({
        errorLabelContainer: $("#form1 div.error"),
        wrapper: 'div',
    });

    var settings = $.data($form[0], 'validator').settings;
    settings.ignore += ':not(.chzn-done)';
    
    $('form').each(function(i, el){
        
        var settings = $.data(this, 'validator').settings;
        settings.ignore += ':not(.chzn-done)';
        
    });
    
});