javascript - 如何在我的代码中使用 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 验证插件给出了一个错误，“最小长度 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。 state 和 zipcode 是 city 字段旁边的字段

                                <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

看起来您的 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)
        }
    });