如何在我的代码中使用jquery验证和jquery自动完成

Question

嗨，我正在使用codeigniter。我使用的是ajax autocomplete for jquery和jquery validation plugin

有一个名为city的输入框

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

我对此输入框使用自动完成功能

jquery代码

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

此图片

当我从下拉列表中选择一个值时，jquery验证插件会给出一个错误，'min length 3'。 但城市名称大于3个字符

这是我的验证插件代码

    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是错误图像

为什么会发生这种情况。如何避免这种情况，我累了soooooooooooo很难，大约一个星期来弄清楚发生了什么，但不能。请帮忙 .......................... 非常感谢你。

更新

这是城市，州和邮政编码html。州和邮政编码是城市字段旁边的字段

                                <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

你有一个重复的ID在那里：

 id="textarea_small" 

修复了上述问题后，您需要拦截验证事件以强制它在选择事件后触发 - 使用jQuery UI自动完成，这很简单，即

...
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;
},
...

我不熟悉你正在使用的插件，但它应该有类似的东西。

Answer 2

看起来你的jquery验证器在自动完成之前启动将所选值放入你的城市框中 - 所以在你的例子中，“a”（而不是“开普敦”）正在得到验证。

您可以通过使用onRollover回调“更快”填充城市框来解决此问题（而不是等待用户进行选择）。我不知道您正在使用哪个自动完成库，但我正在查看这个http://www.codenothing.com/demos/2009/auto-complete/docs/，您应该能够做到这样的事情：

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