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

enter image description here

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

enter image description here

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>

In your code, you're hooking the autocomplete to the .city class. What is the name/id of the city field? Is there more than one city field? What are the two fields next to the "Cape Town" field in your screenshot? Some additional HTML code posted would be helpful. — Dan Short
– Dan Short, Commented Sep 14, 2011 at 13:14
i use only a class , there is only one city field , the next two fields are state and zip code . i ll post some HTML — Kanishka Panamaldeniya
– Kanishka Panamaldeniya, Commented Sep 14, 2011 at 13:16

enriko · Accepted Answer · 2011-09-17 05:37:17Z

1

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)
        }
    });

answered Sep 17, 2011 at 5:37

enriko

461 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Mark Schultheiss · Accepted Answer · 2011-09-27 13:54:54Z

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.

edited Sep 27, 2011 at 13:54

answered Sep 14, 2011 at 13:25

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

2 Comments

Mark Schultheiss Over a year ago

Please edit the code posting then to reflect which input has the CORRECT id and which sample is incorrect:

<div class="input-small"><input class="city clear-input" id="textarea_small" 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" value="<?php if(isset($state['value'])){ echo $state['value'] ; } ?>" type="text" name="state" /></div>

Kanishka Panamaldeniya Over a year ago

Mark Schultheiss -> i edited the code , but it still not working

Collectives™ on Stack Overflow

how to use jquery validation with jquery autocomplete in my code

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related