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

【问题标题】：jQuery form validation on autocomplete field自动完成字段上的 jQuery 表单验证
【发布时间】：2012-07-10 05:32:10
【问题描述】：

我有一个使用 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);
        }
    })
})

【问题讨论】：

标签： jquery validation autocomplete

【解决方案1】：

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

我认为问题在于 jquery 验证的属性“onfocusout”默认为 true。在您选择用户名之前触发 onfocustout 事件。所以也许你可以尝试像关注一样覆盖“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;
         }                          
    }
});

【讨论】：

我尝试了 valid() 方法，似乎不起作用（它还触发了所有其他输入验证）。不过感谢您的提示。我去看看属性。
是的，该函数验证了整个表单（这对你来说有问题吗？）无论如何我编辑了我的答案，请看看它是否有帮助。
这是一个“问题”，因为我希望它能够验证何时按下提交按钮。在此之前，表单应该没有错误消息。我说的对吗，一旦失去焦点，您的代码就会验证每个字段吗？是否可以只对一个字段而不是每个字段执行此操作？

【解决方案2】：

可能不是最漂亮的解决方案，我仍然愿意接受更好的想法，但目前我只是在选择用户后清除错误元素的 html。

$("#usernameError").html("")

【讨论】：