Validate a textbox to accept onlt positive integers

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.

pmudAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
AutogardConnect With a Mentor Commented:
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
 
AutogardCommented:
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
 
Weiping DuSenior Web DeveloperCommented:
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
pmudAuthor Commented:
Hi owenli,


I copied and pasted your exact code. But it didnt work.
0
 
AutogardCommented:
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
 
Weiping DuSenior Web DeveloperCommented:
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
 
Weiping DuSenior Web DeveloperCommented:
BTW, you need to unFocus input box to trigger an action.  Even you change onBlur to onChange, it is same.
0
 
pmudAuthor Commented:
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
 
Weiping DuSenior Web DeveloperCommented:
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
 
pmudAuthor Commented:
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
 
fridomCommented:
What if someone has JavaScript disabled?

This code simply would not work. So go figure

Friedrich
0
 
AutogardCommented:
The tutorial I posted at the top talks about what to do if javascript is disabled.  It's nice.
0
All Courses

From novice to tech pro — start learning today.