Solved

Need an error msg if input is not numeric

Posted on 2008-06-20
6
533 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
  • 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 41

Accepted Solution

by:
HonorGod earned 250 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now