自动完成字段上的 jQuery 表单验证

Question

我有一个输入字段，它使用 jQuery 自动完成方法。用户开始输入用户名，并获取结果列表。一旦他选择了一个结果，就会显示更多的输入字段，其中包含该用户的更多详细信息(此数据是在后台使用 AJAX 获取的)。

自动完成字段中选定的用户名也会复制到隐藏输入中。我这样做是因为我想防止用户在不从建议列表中选择用户名的情况下更改用户名。我使用 jQuery 的 equalTo 验证来执行此操作。它将可见的用户名输入字段的值与隐藏的用户名输入字段的值进行比较。

因此，当用户现在更改可见用户名输入字段的值(只需键入)时，会显示一条通知，指出他必须从列表中选择一个名称。这实际上工作得很好。

但是，我有一个奇怪的行为。用户打开表单来编辑用户。他开始输入用户名，然后选择一个(显示更多输入字段+设置隐藏输入)。但由于某种原因，我收到通知说我必须选择一个用户名。当我单击下一个字段时，此错误就会消失。显然，在选择用户名后，jQuery 不会再次检查输入。相反，它会等待按键或其他表单操作，以重新验证表单。

有什么方法可以在设置隐藏输入后强制 jQuery 重新验证表单吗？

这是我的(缩短的)jQuery 代码:

$(document).ready(function() {
    // Autocomplete
    $("#username").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "http://localhost/users.php",
                contentType: "application/json; charset=utf-8",
                dataType: "jsonp",
                data: {
                    search: request.term,
                    uid: "ahatius" // This value is generated server side --> It just makes the list smaller by just selecting users relevant to this administrator
                },
                success: function(data) {
                    response($.map(data.persons, function(item) {
                        return {
                            label: item.username + " (ID: " + item.uid + ")",
                            value: item.username,
                            username: item.username,
                            groupnumber: item.groupnumber
                        }
                    }));
                }
            });
        },

        minLength: 0,

        // Write input values
        select: function(event, ui) {
            $("#checkUsername").val(ui.item.username);
            $("#groupnumber").val(ui.item.groupnumber);

            showAll(); // This just shows all other input fields, isn't relevant
        }
    })

    // Validation
    $("#useredit").validate({
        rules: {
            username: {
                equalTo: "#checkUsername"
            },
            groupnumber: {
                required: true,
                minlength: 2,
                number: true
            }
        },
        messages: {
            cnAntragsteller: {
                equalTo: "Please select a user from the dropdown!"
            },
            groupnumber: {
                required: "You need to specify a group number!",
                minlength: "The specified group number is too short!",
                number: "You have to specify a numeric value!"
            }
        },
        errorPlacement: function ($error, $element) {
            var name = $element.attr("name");

            $("#" + name + "Error").append($error);
        }
    })
})

Answer 1

不确定是否满足您的要求。但是您可以轻松地使用 $("#useredit").valid() 在您想要的事件中重新验证表单。您也可以检查这个link看看是否有适合您的属性，例如 onkeyup、onfocusout ...等

我认为问题是因为 jquery 验证的属性“onfocusout”默认为 true。 onfocustout 事件在您选择用户名之前触发。所以也许你可以尝试像 follow 一样覆盖“onfocusout”

$(form).validate({
    onfocusout:function(element){
         var dovalid ;
         // Do somethings to determine dovalid is true or false;
         if (dovalid){
            return $(element).valid();    
         }
         else{
            return true;
         }                          
    }
});