CODEWITHSUNDEEP
javascriptjquery
t0mcat
t0mcat

Reputation: 5679

Javascript events

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:

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)

Upvotes: 2

Views: 192

Answers (4)

JasCav
JasCav

Reputation: 34652

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) { }

Upvotes: 0

Alpesh
Alpesh

Reputation: 5405

Try - 

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

Upvotes: 0

Moses
Moses

Reputation: 9183

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());

Upvotes: 0

adamJLev
adamJLev

Reputation: 14031

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.

Upvotes: 1

Related Questions