When to check the form input data - use blur or change event?

Question

Suppose I have a form like this:

Name:<input type="text" name="xxx"  id="name"/>
Type:<select>
          <option>xx</option>
          <option>xx</option>
      </select>
<input type="submit" disabled="disabled" id="sub" />

Now, I want to check to make sure the user name are unique. And the submit button will be abled only and only if the name is unique. So I use jQuery AJAX to query the database.

But now I wonder when to check it?

First I use this:

$("#name").blur(function () {
    $.get(........);
}

But now, in the modern browser they provide the form data save and auto-filled feature. So when user dbclick the input,the browser will provide a list of data (history data) for user to choose (see the image below).

When user choose one of them, the blur event can not be triggered. I also try to use the change event, but it will cause too many request to the server when user use the keybord to input.

How to fix this problem?

UPDATE: None of the answer below is prefect. And now I just use a timer in my page to check the "name" changed or not once per 0.5s. It seems that it meet my requirements.

Answer 1

You could also simply add button for "Check availability" and fire the username uniqueness checking function on the "Check availability" button's click event.

Name:<input type="text" name="xxx"  id="name"/> <input type="button" name="checkUsername"  id="checkUsername" value="Check availability"/>
Type:<select>
          <option>xx</option>
          <option>xx</option>
      </select>
<input type="submit" disabled="disabled" id="sub" />

$("#checkUsername").click(function (e) {
    $.get(........);
    e.preventDefault();
    return false;
}