jQuery blur alternative

Question

Possible Duplicate:
Detect all changes to a <input type=“text”> (immediately) using JQuery

I have a textbox which a user enters data and on the onBlur event it does an AJAX request to validate the data they have entered. If it validates then a button becomes enabled. However users are getting confused that they have to tab out or click somewhere on the page for the button to become enabled.

Is there an alternative event or approach to the code I am using?

$('.serial').live('blur', function () {

  //Do AJAX to validate

  //If ok enable button
  $('#button').attr("disabled", "");

});

So many duplicates, so little time... ;-) This is probably the best: http://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery But there are also: http://stackoverflow.com/questions/1539279/using-jquery-how-do-you-detect-if-the-value-of-a-text-input-has-changed-while-t | http://stackoverflow.com/questions/1481152/jquery-how-to-detect-a-textboxs-content-has-changed | http://stackoverflow.com/questions/6153047/jquery-detect-changed-input-text-box — T.J. Crowder, Dec 02 '11 at 11:34

score 4 · Answer 1 · edited May 23 '17 at 12:26

4

You could use keyup, maybe adding a setTimeout for delaying the requests.

edited May 23 '17 at 12:26

Community

1
1

answered Dec 02 '11 at 11:34

nico

50,859
17
87
112

Can you do a setTimeout for only certain elements ie $('.serial') – Jon Dec 02 '11 at 12:00
@Jon: sure, see the accepted answer in the second link I provided. The `delay` function is only called for the element to which you attach the keyup event – nico Dec 02 '11 at 12:24

score 1 · Answer 2 · answered Dec 02 '11 at 11:31

1

Try keyup - it's fired after each key is pressed.

$('.serial').live('keyup', function () {
    //Do AJAX to validate

    //If ok enable button
    $('#button').attr("disabled", "");
});

answered Dec 02 '11 at 11:31

Rory McCrossan

331,213
40
305
339

but not if they paste data into the field – Alnitak Dec 02 '11 at 11:35
Yes it does: http://jsfiddle.net/RoryMcCrossan/A9WK6/ – Rory McCrossan Dec 02 '11 at 11:37
KeyUp makes sense, it will just make a lot of AJAX requests – Jon Dec 02 '11 at 11:39
@Alnitak Ah, I see your point - if they paste with the mouse. – Rory McCrossan Dec 02 '11 at 11:39
There used to be a solution with a timer, requesting ajax only if no key was pressed for 0.5 second for instance. Can't find out where I saw this. Edit: here it is http://stackoverflow.com/questions/4945019/jquery-keyboard-pause-catch – Boris Delormas Dec 02 '11 at 11:43
Looks like @nico might have posted it – Jon Dec 02 '11 at 11:43
You're right! I didn't read that deep... – Boris Delormas Dec 02 '11 at 11:46

score 1 · Answer 3 · answered Dec 02 '11 at 11:39

Sending AJAX requests on each keystrokes will make huge request queue. You can limit this If the Serial have a fixed number of Characters or it has a fixed pattern then

var validate = function(value){
  //Check for number of characters or do regex validate the value
  //If Validated send ajax request otherwise not
}

$('.serial').live('keyup', function(){
  validate(value);
});

$('.serial').live('blur', function () {
  validate(value);
});

//tracking the mouseover on the submit button may also help
//as its common psychology of the users to play with the submit button
//after the entered the data and nothing is happening

also disabling the textbox while validating may also help. such that the user can understand that some processing (validation here) is going on. and the need to wait now.

score 0 · Accepted Answer · edited May 23 '17 at 12:18

0

I decided to use this answer from the link T.J Crowder posted.

 $(document).ready(function () {

    MonitorSerialTextBoxes();

    $('#newSerial').click(function () {

       $.tmpl("productTemplate", mymodel).insertAfter($(".entry").last());
       MonitorSerialTextBoxes();

    });

});

edited May 23 '17 at 12:18

Community

1
1

answered Dec 02 '11 at 12:15

Jon

38,814
81
233
382

jQuery blur alternative

4 Answers4