3

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

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

因此，当用户现在更改可见用户名输入字段的值（只需键入）时，会显示一条通知，说明他必须从列表中选择一个名称。这实际上工作正常。

但是，我有一个奇怪的行为。用户打开表单以编辑用户。他开始输入用户名，然后选择一个（显示更多输入字段 + 设置隐藏输入）。但由于某种原因，我收到通知说我必须选择一个用户名。单击下一个字段后，此错误就会消失。显然，选择用户名后，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);
        }
    })
})
4

2 回答 2

2

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

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

$(form).validate({
    onfocusout:function(element){
         var dovalid ;
         // Do somethings to determine dovalid is true or false;
         if (dovalid){
            return $(element).valid();    
         }
         else{
            return true;
         }                          
    }
});
于 2012-07-10T06:42:53.233 回答
0

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

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

于 2012-07-11T05:15:36.630 回答