Updated March 28, 2023
Introduction to jQuery isNumeric()
- jQuery isNumeric() is a utility method provided by jQuery to determine whether its argument is a numeric value or not.
- jQuery offers several utility methods to help complete the routine programming tasks easily with fewer lines of code.
- Theses utilities have the format $(namespace).
- Shorthand version of isNumeric() method is $.isNumeric().
- The return type for this method is Boolean. It returns true if the argument is a number otherwise, returns false.
Syntax:
The argument refers to the value to be tested for numbers. It can be of any type.
Note: $.isNumeric() method returns true if the argument is of number type or if it is a string type and can be changed into finite numbers.
Examples to Implement jQuery isNumeric() Method
Below are the examples to understand how $.isNumeric() method is used for numeric value detection:
Example #1
Following example illustrates the implementation of jQuery $.isNumeric() method to check if the entered value is numeric or not.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
How to check whether a value is numeric or not in jQuery?
</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
var inputVal = $("input").val();
alert($.isNumeric(inputVal));
});
});
</script>
</head>
<style>
div {
text-align: center;
background-color: cadetblue;
width: 600px;
height: 280px;
margin-left: 100px;
}
</style>
<body>
<div>
<br />
<h1 style="color:maroon">
jQuery isNumeric()
</h1>
<h3>
To check if a value is numeric or not?
</h3>
<hr />
<form>
<p>
<br />
Please enter your input
<input style="text-align:center;" type="text" />
</p>
<button type="button" style="font-weight: bold;">Check</button>
</form>
</div>
</body>
</html>Output:
- In the above example, $.isNumeric() checks whether the entered input value is numeric or not.
- If the value is numeric, this method returns true otherwise false.
- The below screenshot shows the screen when the code gets executed and the page is loaded for the first time.
- If the value entered is numeric, the page displays “true” as shown below in the screenshot.
- If the value entered is not numeric, the page displays “false” as shown below in the screenshot.
Example #2
Given below is a similar example illustrating the use of $.isNumeric() method in determining if the given value is numeric or not.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
How to check whether a value is numeric or not in jQuery?
</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
var inputValue = $("input").val();
var result = $.isNumeric(inputValue);
if (result) {
$("h3").text("The input value is Numeric");
} else {
$("h3").text("The input value is Not Numeric");
}
});
});
</script>
<style>
div {
text-align: center;
background-color: cadetblue;
width: 600px;
height: 280px;
margin-left: 100px;
}
</style>
</head>
<body>
<div>
<br />
<h1 style="color:maroon">
jQuery isNumeric()
</h1>
<h3>
To check if a value is numeric or not?
</h3>
<hr />
<form>
<p>
<br />
Please enter your input
<input style="text-align:center;" type="text" />
</p>
<button type="button" style="font-weight: bold;">Check</button>
</form>
</div>
</body>
</html>Output:
- The below screenshot is taken when the page is initially loaded in the browser upon code execution.
- If the entered value in the input box is a number, the screen displays the text stating “The input value is Numeric” as shown below in the screenshot.
- If the entered value is not a number, the screen displays the text stating “The input value is Not Numeric” as shown below in the screenshot.
Example #3
Here’s another example to demonstrate the use of $.isNumeric() method. In this example, we will test a few sample input values for numeric.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
To check if the value is numeric or not
</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").one("click", function() {
$("#div3").append('Is "-1" numeric? ' + $.isNumeric("-1") + "<br />");
$("#div3").append("Is +1 numeric? " + $.isNumeric(-1) + "<br />");
$("#div3").append(
'Is "1.6456456456e+1?" ' + $.isNumeric("1.6456456456e+1") + "<br />"
);
$("#div3").append("Is 1.23 numeric? " + $.isNumeric(1.23) + "<br />");
$("#div3").append(
'Is "0xFF" numeric? ' + $.isNumeric("0x00") + "<br />"
);
$("#div3").append("Is null numeric? " + $.isNumeric(null) + "<br />");
$("#div3").append(
"Is undefined numeric? " + $.isNumeric(undefined) + "<br />"
);
$("#div3").append('Is "a" numeric? ' + $.isNumeric("a") + "<br />");
$("#div3").append(
"Is false numeric? " + $.isNumeric(false) + "<br />"
);
$("#div3").append("Is true numeric? " + $.isNumeric(true) + "<br />");
$("#div3").append("Is NaN numeric? " + $.isNumeric(NaN) + "<br />");
$("#div3").append(
"Is Infinity numeric? " + $.isNumeric(Infinity) + "<br />"
);
});
});
</script>
<style>
#div3 {
text-align: center;
background-color: cadetblue;
width: 600px;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="div3">
<br />
<h1 style="color:maroon">
jQuery isNumeric()
</h1>
<button id="btn" type="button" style="font-weight: bold;">
Click to check
</button>
<br />
<hr />
</div>
</body>
</html>Output:
- The below screenshot shows the screen which gets displayed when the page is initially loaded in the browser.
- On clicking the button, we will see a list of few test values displaying if they are numeric or not.
Conclusion
- jQuery offers a number of utility methods that are helpful in completing routine programming tasks in an easier way.
- isNumeric() is one of the utility methods provided by jQuery whose basic purpose is to detect whether a given value is numeric or not.
- Its return type is Boolean, returns true if the value is numeric otherwise, returns false.
Recommended Articles
This is a guide to jQuery isNumeric. Here we discuss the Introduction to jQuery isNumeric() and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
