如何在我的代码中使用带有 jquery 自动完成功能的 jquery 验证

Question

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

有一个输入框叫城市

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

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

更新

这是城市、州和邮政编码 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)
        }
    });

Answer 2

嗯，你有一个重复的 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;
},
...

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