jquery 更改 &验证

Question

我们有一个 jquery 自动完成输入框：

<input name="suburb" id="suburb-agency" autocomplete="off" class="text" type="text" value="">

它会下拉，当他们选择一个选项时，另一个选择框会根据所选内容进行更新：

<select class="text" name="state" id="state-agency">
    <option value="notselected">Please select your state...</option>
    <option value="Apple">Apple</option>
    <option value="Pear">Pear</option>
</select>

例如，他们在 #suburb-agency 自动完成中选择 Pear ，然后在 #state-agency 中自动选择 Pear，

效果非常好。

我遇到的唯一问题是 jquery 验证，当选择 Pear 并更改 #state-agency 框时，验证不会显示，尽管如果我从下拉列表中手动选择一个选项，则会显示验证下框。

这是我的 jquery：

/* STATE VALIDATION */
    $("#state-agency").change(function () {
        var state = $('#state-agency').val();
        if (state == "notselected"){
            $('#state-agency').css({"border-color":"#3399ff"});
            $('#state-err').html("You must choose which state you work in.").removeClass("success_msg").addClass("error_msg");
            return false;
        }else{
            $('#state-agency').css({"border-color":"#1f6d21"});
            $('#state-err').html("Thanks for choosing your state!").removeClass("error_msg").addClass("success_msg");
        }
    });

如何修改它，以便在从自动完成中选择它时显示成功消息？而不仅仅是手动？我猜我需要从更改函数进行更改？

编辑（我们的自动完成代码根据要求更新下拉框）

$(function() {
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split(term).pop();
    }

    $( "#suburb-agency" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: function( request, response ) {
                $.getJSON( "http://www.site.com/folder/script.php", {
                    term    :   extractLast( request.term )
                }, response );
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 2 ) {
                    return false;
                }
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
              if (ui.item) {
                $('#state-agency').val(ui.item.state);
              }
              else {
                $('#state-agency').val('');
              }
            }
        });
});

Answer 1

如果您使用 jQuery 验证，要在更新输入元素后执行验证，您需要调用

 $(selector).valid()

Answer 2

我找到了解决这个问题的方法，我需要在自动完成 JS 中的相关事件 ID 上使用 trigger() 。