Javascript events

Question

Hi folks,

I am completely confused here. So I am looking for a solution for the following problem:

I want to trigger some function(for now an alert box) using jQuery on an input field. Conditions are:

• Input field always maintains the focus.
• Input is fed from a USB device, which acts just like a keyboard input. So for 10 characters, there will be 10 keydown and keyup events.
• Once input is filled with 10 characters, respective alert box should pop out.

Now the problem I am facing, how do I find out that input fed in is not equal to 10 characters, so throw an error alert box.(lets say just 5 chars came in input, how do I figure out the final count is 5, because there will be 5 keyup events)

Answer 1

You could show a message underneath/beside the input box instead of popping an alert box.
E.g. on every keyup event, check the string length, and if it's not 10, show that message.

If you really, really have to resort to alert box, you could do a timeout check, e.g. only perform the validation after 1000ms of key event inactivity. This could get very annoying on the user though.

Answer 2

Try -

$('#idofinputfield').keyUp(function () {
    var length = $('#idofinputfield').val().length;
    if(length <= 10){
       alert("less than 10");
    }else{
       alert("greaterthan 10");
       }
   });

Answer 3

You really have two problems here. One is just understanding the jQuery syntax (see the second part to my answer), and the other is - what is the best way to understand WHEN to throw up an error box.

To answer the second question first, my recommendation would be to not use an alert box to warn the user as they tend to be modal and really interrupt the flow of input. Secondly, as you said - how do you know when the person has stopped "typing." Unless you use some sort of timing mechanism (which is more trouble than it's worth), you don't. My suggestion would be to utilize a "div" within your HTML that shows there is an error UNTIL you reach 10 characters. Once that happens, you can hide the div. (And, of course, the div can be styled to look pretty in the meantime.)

So...how to do this...

Let's assuming your input field has an id of "myField." If you are using jQuery (which is in your tags), you would do something like this.

$(function() {
  var keypresses = 0;
  $('#myField').keyUp(function () {
    keypresses++;
    if(keypresses == 10) {
      $('#error').hide(); // This is your div error with some error text in it.
      // Do other stuff.
    } else {
      // Display an error.
    }
  });

Alternatively, if you don't want to use the keypresses variable, you can also use..

if($(this).val().length == 10) { }

Answer 4

The real issue is the fact that you are measuring in key press events, because not all key presses (even when the field has focus) will insert a character into field (for example returnesc). Therefore, you will need to measure the string length in order to validate the code before you start executing functions.

In actuality you don't even need jQuery to accomplish what you need, just bind the function call to a key press event, and only execute the function call if yourstring.length = 10

yourInput.onKeyPress(yourString.length = 10 && yourFunction());