The below code snippet explains how to perform Numeric values validation on HTML INPUT textbox using jQuery.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title></title>
<script type = "text/javascript">
$("#demo").live("click", function () {
if ($(this).val() == "") {
$(this).next().html("Enter numeric values");
}
});
$("#demo").live("keyup", function () {
$(this).next().html("");
});
$("#demo").live("change", function () {
if (isNaN(parseInt($(this).val()))) {
$(this).next().html("Not valid numeric value");
}
});
</script>
</head>
<body>
<form id="form1">
<input type = "text" id = "demo" /><span></span>
</form>
</body>
</html>
Explanation:
In the above code snippet there’s a HTML INPUT textbox control with ID demo. To the HTML TextBox I have applied various jQuery event handlers like click, keyup, and change.
On the click event handler I check if the textbox is empty I display informative message to the user in the HTML SPAN next to the textbox.
On the keyup event handler I clear the HTML SPAN.
On the change event handler I check if the entered value is numeric or not, if not I display error message using the HTML SPAN.
Demo: