how to use jquery validation with jquery autocomplete in my code

Question

hi i am using codeigniter . i am using ajax autocomplete for jquery and jquery validation plugin

there is input box called city

<input type="text" class="city" name="city" value="">

i use autocomplete for this inputbox

jquery code

 var a = jq('.city').autocomplete({ 
    serviceUrl:"<? echo $this->config->item('base_url'); ?>home/auth/city_autocomplete",
 });

image of this

when i select a value from the drop down the jquery validation plugin gives an error , 'min length 3'. but the city name is greater than 3 charactors

this is my validation plugin code

    var x=jq("#contactinfo").validate({
        rules: {

            city: {
                required:{
                    depends: function(){
                                    return ((type == "Single Store & Venue") || (type == "Chain Store & Venue")|| (type == "Department Store"));
                             }
                        },
                minlength: 3,
                maxlength: 50                   
            },
       },

        messages: {

            city: {
                required: "Enter City",
                minlength: "min length 3"
            },
        }
    }); 

tihs is the error image

why is this happening . how to avoid this , i tired soooooooooooo hard , about one week to figure out what is happening but couldn't . please help .......................... thank you verymuch .

UPDATE

this is city , state and zip code html . state and zipcode are the fields next to city field

                                <div class="input-container">
                                        <div class="catergory-title-c">
                                            <span class="verdana12gray"></span>
                                        </div>
                                        <div class="form-item">
                                            <div class="catergory-inputs-b">
                                                <div class="input-small">
                                                <input
                                                   class="city clear-input"
                                                   id="textarea_small_1"
                                                   value="<?php if(isset($city['value'])){  echo $city['value'] ; }else{echo $map['other']['CityName'];} ?>"
                                                   type="text"
                                                   name="city"
                                               />                       

                                                </div>
                                                <div class="input-small">
                                                        <input
                                                               class="state clear-input"
                                                               id="textarea_small_2"
                                                               value="<?php if(isset($state['value'])){ echo $state['value'] ; } ?>"
                                                               type="text"
                                                               name="state"
                                                           />                                                               

                                                </div>
                                                <div class="input-small">
                                                    <input type="text" id="textarea_small_3" name="zip_code"
                                                        value="<?php if(isset($zip_code['value'])){ echo $zip_code['value'] ; } ?>" />
                                                </div>

                                            </div>
                                        </div>
                                        <div class="clear-fix"></div>
                                    </div>

Answer 1

um you have a duplicate id IN THERE:

 id="textarea_small" 

Having fixed the above, you will need to intercept the validation event to force it to fire AFTER the selection event - with the jQuery UI Autocomplete, that is pretty easy ie

...
select: function(event, ui) {
    var selectedValue = ui.item.value;
    var focusedElement = $(this);
    // my pretend function checkData OR add a validation event fire here.
    checkData(focusedElement, ui.item, selectedValue);
    return false;
},
...

I am not familiar with the plug-in you are using but it should have something like that.

Answer 2

Looks like your jquery validator kicks in before autocomplete puts the selected value in your city box - so in your example, "a" (instead of "Cape Town") is getting validated.

You might be able to fix this by populating the city box "faster" using onRollover callback (instead of waiting the user to make a selection). I don't know what autocomplete library that you are using, but I'm looking at this one http://www.codenothing.com/demos/2009/auto-complete/docs/ and you should be able to do something like this:

    jq('.city').autoComplete({
        onRollover: function(event, ui){
            jq('.city').val(ui.data.value)
        }
    });