client-side text-box character limit validation using jQuery?

Question

I have a textbox that must have a MIN number of characters as well as a MAX number of characters. What is the best way, using jQuery, to make sure that the input is within the range (while displaying status messages to the user) before allowing the user to submit the form?

Update: the code below works to some degree, however I am getting issues when deleting text. Since it is using 'keypress' to capture events in the textbox, the 'length' variable gets falsely incremented when hitting backspace for example. It seems like the issue is that the length of the text is retrieved before the fact i.e. a keypress will always result in a length of what was there before plus 1. What is the proper way around this?

Update: I think i solved the previous issue by using the keyup function instead of keypress

Answer 1

If this is the only client side validation in your app (always validate on the server too!) then it'd look something like this:

$("#your_textbox").keypress(function() {
  var length = this.value.length;
  if(length >= MIN && length <= MAX) {
    $("#your_submit").removeAttr("disabled");
    $("#your_validation_div").hide();
  } else {
    $("#your_submit").attr("disabled", "disabled");
    $("#your_validation_div").show();
  }
});

If you need a lot of validation in your application you might want to consider the validation plugin.

Setting the maxlength attribute:

<input type='text' maxlength="30" />