Solved

Validate a textbox to accept onlt positive integers

Posted on 2006-07-18
12
789 Views
Last Modified: 2010-04-06
Hi,

I have a textbox. I want the users tp be able to enter a positive no. only in that HTML textbox. How can I do this? If the users enter a non positive integer value/character, then they should see error message that enter a positive no.

How to do that? Thanks for any help.

0
Comment
Question by:pmud
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
  • +1
12 Comments
 
LVL 8

Expert Comment

by:Autogard
ID: 17132668
Great tutorial on form validation: http://www.xs4all.nl/~sbpoley/webmatters/formval.html

The basic idea is to use onchange events on the form elements that call the appropriate functions in the code in that tutorial.

Let me know if you need more specifics.
0
 
LVL 8

Accepted Solution

by:
Autogard earned 500 total points
ID: 17132704
Also another EE question in which the accepted answer demonstrates the "onchange" event.  You can check the fields when the fields change or on the submit (using onclick).  Actually, as the tutorial mentions, you should do both AND make sure you validate the data on the server side as well.

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20653756.html

0
 
LVL 9

Expert Comment

by:owenli27
ID: 17133008
inside your HTML head, create a function like this:
<script  language="javascript">
function ValidateNum(frmName)
{
      var tempChar;
      var legalChar = "1234567890.-";

      for (var i = 0; i < frmName.tempNum.value.length; i++) {
            tempChar = frmName.tempNum.value.charAt(i)
            if (legalChar.indexOf(tempChar) < 0){
                  alert("Your message one....")
                  frmName.tempNum.focus();
                  return false;
            }
      }

      if(frmName.tempNum.value < 0){
            alert("Your message two....")
            frmName.tempNum.focus();
            return false;
      }
      return true;
}
</script>

in your HTML body:
<form>
<input type="text" name="tempNum"  value="" onBlur="ValidateNum(this.form)">
</form>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:pmud
ID: 17133148
Hi owenli,


I copied and pasted your exact code. But it didnt work.
0
 
LVL 8

Expert Comment

by:Autogard
ID: 17133205
What does it do?

Did you read through the tutorial I pointed you to?  It's not very long and will help you understand the topic better.
0
 
LVL 9

Expert Comment

by:owenli27
ID: 17133316
pmud,

I just test it and it works fine, is your browser setting allow scripts? This is HTML code I used for test:

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script  language="javascript">
function ValidateNum(frmName)
{
     var tempChar;
     var legalChar = "1234567890.-";

     for (var i = 0; i < frmName.tempNum.value.length; i++) {
          tempChar = frmName.tempNum.value.charAt(i)
          if (legalChar.indexOf(tempChar) < 0){
               alert("Error message ONE....")
               frmName.tempNum.focus();
               return false;
          }
     }

     if(frmName.tempNum.value < 0){
          alert("Error message TWO....")
          frmName.tempNum.focus();
          return false;
     }
     return true;
}
</script>
</HEAD>

<BODY>
<form>
Number:
<input type="text" name="tempNum"  value="" onBlur="ValidateNum(this.form)">
</form>
</BODY>
</HTML>

0
 
LVL 9

Expert Comment

by:owenli27
ID: 17133456
BTW, you need to unFocus input box to trigger an action.  Even you change onBlur to onChange, it is same.
0
 

Author Comment

by:pmud
ID: 17133687
Hi owenli,

Below is what I am doing:

<script  language="javascript">
function ValidateNum(frmName,tempNum)
{
     var tempChar;
     var legalChar = "1234567890.-";

     for (var i = 0; i < frmName.tempNum.value.length; i++) {
          tempChar = frmName.tempNum.value.charAt(i)
          if (legalChar.indexOf(tempChar) < 0){
               alert("Error message ONE....")
               frmName.tempNum.focus();
               return false;
          }
     }

     if(frmName.tempNum.value < 0){
          alert("Error message TWO....")
          frmName.tempNum.focus();
          return false;
     }
     return true;
}
</script>

<INPUT name="num_days" accept  type="text"  class="textinput" value="#num_days#" size="3"
                                    onBlur="ValidateNum(this.alertform, num_days)">&nbsp;

I am not sure, whats wrong and I have unfocussed teh etxtbox but even then this doesnt work.

Thanks for any help.
0
 
LVL 9

Expert Comment

by:owenli27
ID: 17133882
You passed input box name to function, so you don't need "frmName" associated with tempNum! Change your function to
function ValidateNum(frmName, tempNum)
{
     var tempChar;
     var legalChar = "1234567890.-";

     for (var i = 0; i < tempNum.value.length; i++) {
          tempChar = tempNum.value.charAt(i)
          if (legalChar.indexOf(tempChar) < 0){
               alert("Error message ONE....")
               tempNum.focus();
               return false;
          }
     }

     if(tempNum.value < 0){
          alert("Error message TWO....")
          tempNum.focus();
          return false;
     }
     return true;
}
0
 

Author Comment

by:pmud
ID: 17134327
Hi,

The following worked for me:

<script  language="javascript">
      function formSubmit(inp)
      {
        if ((inp.value+"").match(/^[0-9]*$/))
             {
                   return true;
              }
             else
                  alert("Please enter a valid number")
                  return false;    
      }
</script>

<INPUT name="num_days" accept  type="text"  class="textinput" value="#num_days#" size="3"
                                    onBlur="formSubmit(num_days)">

Thanks
0
 
LVL 24

Expert Comment

by:fridom
ID: 17146226
What if someone has JavaScript disabled?

This code simply would not work. So go figure

Friedrich
0
 
LVL 8

Expert Comment

by:Autogard
ID: 17148299
The tutorial I posted at the top talks about what to do if javascript is disabled.  It's nice.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question