Validate combobox with jquery easyui

Question

In my page, has two plugins: jquery validate and jquery easyui .. I use jQuery Validate to validate the datas inputs in a form.. And I use jQuery EasyUI to customize a combobox, allowing to search datas in combobox.

So, I put the Validate plugin:

$("#form1").validate({
        rules:{
            filename:{
                required: true,
                minlength: 3
            },
            leia:{
                required: true
            }
        }
    });

That's ok! Is's work! But when I put the easyUI plugin, and set class in combobox 'leia' the validation of 'leia' didn't work more.

<form id="form1" action="" method="post">
        <div>
                <label>Name:</label>
                <input type="text" name="filename" />
        </div>
        <div>
                <label>Leiame:</label>
                <select name="leia" class="easyui-combobox">
                        <option value=""></option>
                        <option value="1">Java</option>
                        <option value="2">C</option>
                        <option value="3">C#</option>
                        <option value="4">PHP</option>
                </select>
    </div>

        <input id="submit-go" type="submit" name="add" value="Add" />
</form>

When I take off the class in 'leia', the validation works! Can anybody help me ?

Thank you in advance

Answer 1

All you need to do is allow jQuery Validate to execute on hidden elements. EasyUI is simply hiding the select and replacing it with its own elements, but ultimately updating your select behind the scenes. In order to make this work:

$("#form").validate({
    ignore:'',//by default it ignores hidden inputs, so setting this to blank overrides that
    rules: {              
        leia: {
          required: true
        }
      },
      errorPlacement: function(error,element){
        if (element.hasClass('combo-value')){
            element.closest("span.combo").after(error);
        } else {
            element.after(error);   
    }   }       
});

I've added the errorPlacement function as well, which moves the error message outside of the easy UI markup (otherwise it gets buried in a span with overflow:hidden set).

See it working here: http://jsfiddle.net/ryleyb/B5XX7/2/