?
Solved

Need an error msg if input is not numeric

Posted on 2008-06-20
6
Medium Priority
?
541 Views
Last Modified: 2008-06-22
Hello,
  I am trying to use the code below to verify the input is numeric in value only.  The part I am having trouble developing is a function that gives a msg to the user if the input isn't numeric.  Please look over my code and help me out.  Thanks.
<head>
<style type="text/css">
.classname {
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: red;
}
</style>
</head>
 
<body>
 
<form>
 <input name="Text1" type="text" />&nbsp;<input name="Button1" type="button" value="Validate" />
</form>
 
<script type="text/javascript">
function IsNumeric(sText) {
	var ValidChars = "0123456789.";
	var IsNumber=true;
	var Char;
	for (i = 0; i < sText.length && IsNumber == true; i++){
	Char = sText.charAt(i);
	if (ValidChars.indexOf(Char) == -1){
	IsNumber = false;
	}
  }
return IsNumber;
}
function CheckNumeric(field)
     {
          var check = true;
          var value = field.value; 
          for(var i=0;i < field.value.length; ++i)
          {
               var new_key = value.charAt(i); 
               if(((new_key < "0") || (new_key > "9")) && 
                    !(new_key == ""))
               {
                    check = false;
                    break;
               }
          }
          
          if(!check)
          {
               class="classname" ("Please enter a numeric value");
               
          }
     }
</script>
 
</body>
 
</html>

Open in new window

0
Comment
Question by:JDidit
[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
  • 3
  • 2
6 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 21836166
Something like this might be useful
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> non-Digit </title>
<script type='text/javascript'>  
  //------------------------------------------------------------------
  // Name: nonDigit()
  // Role: Look for a non-digit in a value
  //------------------------------------------------------------------
  function check( obj ) {
    if ( /[^0-9]/.test( obj.value ) ) {
      alert( 'Invalid entry.  A non-digit was specified.' );
    }
  }
</script>  
</head>
<body>
  <input type='text' onchange='check(this);return false;' />
</body>
</html>

Open in new window

0
 
LVL 7

Expert Comment

by:alexpercsi
ID: 21836814
There is also the native isNaN function of Javascript. isNaN returns true if the value passed to it is not a numeric value. Example

if (isNaN(document.getElementById("tx_number").value))
alert("not a valid number");
else
//submit

Open in new window

0
 

Author Comment

by:JDidit
ID: 21837478
I'm not looking for an alert feature... this error will come up right below the input box in red I hope (I wrote the css code that way) to let the user know that they need to only put in numbers.  
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!

 
LVL 41

Accepted Solution

by:
HonorGod earned 1000 total points
ID: 21838100
ok, no alert. what about something like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> non-Digit </title>
<script type='text/javascript'>  
  //------------------------------------------------------------------
  // Name: field()
  // Role: Locate the specified document element
  //------------------------------------------------------------------
  function field( id ) {
    var ele = document.getElementById( id );
    if ( !ele ) {
      alert( 'Specified document element not found.  id="' + id + '"' );
    }
    return ele;
  }
 
  //------------------------------------------------------------------
  // Name: nonDigit()
  // Role: Look for a non-digit in a value
  //------------------------------------------------------------------
  function check( obj ) {
    if ( /[^0-9]/.test( obj.value ) ) {
      var msg = field( 'msg' );
      if ( msg ) {
        msg.innerHTML = 'Invalid entry.  A non-digit was specified.';
      }
    }
  }
</script>  
</head>
<body>
  <input type='text' onchange='check(this);return false;' />
  <div id='msg'></div>
</body>
</html>

Open in new window

0
 

Author Comment

by:JDidit
ID: 21839450
That works great Thanks Honor!!!
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 21840696
You are very welcome.  Thanks for the grade & points.

Good luck & have a great day
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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses

770 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