5 digit numeric mask and enabling submit

gabrielAllen · Jan 19, 2006

I need to limit the input of a text field to numeric values only. Also, this field has a min/max of 5 characters and enables a submit-button "onkeyup" of the 5th value. How can I accomplish this?

Thanks in advance.

kaht · Jan 19, 2006

Here's my stab at it using our good ole pals regular expressions:

Code:

<html>
<head>
<script type="text/javascript">

function checkStr(obj) {
   str = obj.value;
   //this prevents an alert box when the field is empty
   if (str.length == 0) {
      return true;
   }
   if (!/^\d{1,5}$/.test(str)) {
      alert("Invalid Character, field may contain only numbers 0-9");
      return false;
   }
   document.getElementById("theSubmit").disabled = (str.length == 5) ? false : true;
   return true;
}

</script>
</head>
<body>
   <form action="" method="post">
      <input type="text" onkeyup="checkStr(this)" maxlength="5" /><br />
      <input type="submit" disabled="disabled" id="theSubmit" value="submit form" />
   </form>
</body>
</html>

-kaht

How much you wanna make a bet I can throw a football over them mountains?

kaht · Jan 19, 2006

And amendment to my first post, you can do w/o the first if clause by changing one little piece of code:

Code:

<html>
<head>
<script type="text/javascript">

function checkStr(obj) {
   str = obj.value;
   if (!/^\d{[!]0[/!],5}$/.test(str)) {
      alert("Invalid Character, field may contain only numbers 0-9");
      return false;
   }
   document.getElementById("theSubmit").disabled = (str.length == 5) ? false : true;
   return true;
}

</script>
</head>
<body>
   <form action="" method="post">
      <input type="text" onkeyup="checkStr(this)" maxlength="5" /><br />
      <input type="submit" disabled="disabled" id="theSubmit" value="submit form" />
   </form>
</body>
</html>

-kaht

How much you wanna make a bet I can throw a football over them mountains?

tsdragon · Jan 19, 2006

If you want to allow ONLY 5 digits or none, not 0-5 digits, try this:

Code:

   if (!/(^\d{5}$)|(^$)/.test(str)) {

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

kaht · Jan 20, 2006

Tracy, placing that line in my code would cause an alert box to pop up after every number typed. Since the op was looking for an "onkeyup" solution, it would probably be best to check for any number between 0 and 5, otherwise you'll receive the error after each key hit until you hit the 5 quota.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

gabrielAllen · Jan 20, 2006

Yes, that is what happens. Everytime an alpha is inserted, an alert pops. Is this what is supposed to happen?

kaht · Jan 20, 2006

Is this what is supposed to happen?

I don't know. You tell me, it's your project. I just provided an example - not intended for you to plop right into your page. It's supposed to help you understand how it [!]could[/!] be achieved.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

tsdragon · Jan 20, 2006

True, for an onkeyup you would need to deal with 0-5 digits. That doesn't account for the OP's apparent requirement for exactly five digites though (quote: "min/max of 5 characters"). You would have to go about checking for that in a different manner (like using onblur or onfocusout).

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

5 digit numeric mask and enabling submit

gabrielAllen

Programmer

kaht

Programmer

kaht

Programmer

tsdragon

Programmer

kaht

Programmer

gabrielAllen

Programmer

kaht

Programmer

tsdragon

Programmer

Similar threads

Part and Inventory Search

Sponsor