何时检查表单输入数据-使用模糊或更改事件？

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

简单的解决方案：将ajax调用放在密码字段的焦点上。

Answer 2

what you should do is when the user double click on the text box, download the options and store them in an array in your code behind. as the user types in the text box, remove the items that are not wanted.

Also, if you want to fire an event like blur (which is on input element) you probably want to use the change even for drop down list.

Answer 3

The approach I would use is to load the collection of Usernames in on page load , and check the user entered data against the collection on the change event . This way your database will only need to deal with a single request per page load, and while the front end has more work to do, it shouldn't have a negative impact on your user's experience.

There is a chance for concurrency issues, where two new users load the page at the same time, choose the same username and try to submit, whoever submits last is going to have an active submit button but an invalid username, and you'll need something server side to deal with that.

Answer 4

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;
}