Question

I’ve got an input field, which’s using the jQuery autocomplete method. The user starts typing the name of the user, and gets a list of results. Once he selects a result, more input fields are shown, which contain more details of this user (data for this is fetched with AJAX in the background).

Also the selected username in the autocomplete field is copied to a hidden input. I’m doing this, because I want to prevent the user from changing the username without selecting a user name from the suggestions list. I’m using jQuery the equalTo validation to do this. It compares the value of the visible username input field, with the hidden one.

So when the user now changes the value of the visible username input field (just with typing), a notice is displayed, stating that he has to select a name from the list. This actually works fine.

But, I have a strange behaviour. The user opens the form to edit a user. He starts typing a username, and selects one (more input fields are shown + hidden input is set). But for some reason, I get the notice saying I have to select a user name. This error disappears as soon as I click into the next field. Obviously jQuery doesn’t check the input again after a username has been selected. Instead it waits for a keypress or another form action, to revalidate the form.

Is there any way, I can force jQuery to revalidate the form, after the hidden input has been set?

This is my (shortened) jQuery code:

$(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

Might not be the prettiest solution, and I’m still open for better ideas, but for the moment I just clear the html of the error element as soon a user is selected.

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