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”在默认情况下是真的。在选择用户名之前会触发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;
         }                          
    }
});

Answer 2

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

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

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

2 个答案: