We Keep Coding

Show error message if non numeric value entered

How to show error message to user if non-numeric values are entered in the text box.
The error message can be displayed below the text box something like enter the numbers only
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
<input type="text" class="textfield" onkeypress="return isNumber(event)" />

Just add some sort of output in your if. Like alert or even better, with a message near the input field. But this is up to you.
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
alert("only input numbers");
return false;
}
return true;
}
<input type="text" class="textfield" onkeypress="return isNumber(event)" />

Create a dom element to show the error and add a class to initially hide it. If any input is anything other than number remove the class from the element
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
document.getElementById("errorNumber").classList.remove('error-hide')
return false;
}
document.getElementById("errorNumber").classList.add('error-hide')
return true;
}
.error {
color: red;
}
.error-hide {
display: none;
}
<input type="text" class="textfield" onkeyup="isNumber(event)" />
<p id="errorNumber" class='error error-hide'>Please enter only number </p>

You can use a span element to display the messages inline in the page:
function isNumber(evt) {
var errorClass = document.querySelector('.error');
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
errorClass.style.display = 'block';
return false;
}
errorClass.style.display = 'none';
return true;
}
.error{
display: none;
color: red;
}
<input type="text" class="textfield" onkeypress="return isNumber(event)" />
<span class='error' >Enter numbers only</span>

Seems like your are not considering digits when it's typed from keyboard's 'numpad'.
Following should work.
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || (charCode > 57 && charCode < 96) || charCode > 105)) {
document.getElementById("errorNumber").classList.remove('error-hide')
return false;
}
document.getElementById("errorNumber").classList.add('error-hide')
return true;
}
.error {
color: red;
}
.error-hide {
display: none;
}
<input type="text" class="textfield" onkeyup="isNumber(event)" />
<p id="errorNumber" class='error error-hide'>Please enter only number </p>

function isNumber(evt) {
if(isNaN(evt.key)) {
document.getElementById('inptErr').style.display = "block";
} else {
document.getElementById('inptErr').style.display = "none";
}
}
<input type="text" class="textfield" onkeypress="isNumber(event)" />
<span id="inptErr" style="display:none;color:red;">Please enter numbers only</span>

Change input type of textbox

I am using a script for my textbox to make sure the user can enter only numbers instead of text.
Here is my textbox:
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event)" />
And here is my javascript:
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
I want to upgrade my JavaScript. I want that the textbox accepts a input with a dot . (only 1 dot), like 11.5
What do I need to change in my script so it will be accept the dot and limit this to one?

Try this one
<input type="text" id="txtCheck" onkeypress="AllowDecimalNumbersOnly(this, event)" />
function AllowDecimalNumbersOnly(Id, Evt) {
Id.value = Id.value.replace(/[^0-9\.]/g, '');
if ((Evt.which != 46 || Id.value.indexOf('.') != -1) && (Evt.which < 48 || Evt.which > 57)) {
Evt.preventDefault();
}
}

JavaScript :
<script>
var isHav=false;
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if(charCode == 46){
if(isHav==true){
return false;
}else{
isHav=true;
return true;
}
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
HTML :
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event)" />

alternatively you can use this..
function isNumber(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /^[0-9.,]+$/;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event)" />

Follow the below code:
you need to change your function onkeypress event by adding this parameter
just like below:
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event, this)" />
and change your function as below:
function isNumber(evt, element) {
var charCode = (evt.which) ? evt.which : event.keyCode
if ((charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
(charCode > 31 && (charCode < 48 || charCode > 57)))
{
return false;
}
return true;
}
You can check below running code:
function isNumber(evt, element) {
var charCode = (evt.which) ? evt.which : event.keyCode
if ((charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
(charCode > 31 && (charCode < 48 || charCode > 57)))
{
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event, this)" />

You can use type="number" attribute if it meet with your requirement
<input type="text" value="" id="tb1" name="tb1" onkeypress="return isNumber(event)" type="number" />
Or Use This
function isNumber(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}

How my JS function would restrict specific data ?

In asp.net textbox I have called a javascript function which I wrote to restrict only 'digits' entry in text box but I also want to allow '+' sign but can't solve it.
This is what I have tried so far.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}

Just reverse your condition and add the ASCII code for + which is 43 to return true
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if ((charCode >=48 && charCode <= 57) || (charCode == 43))
return true;
return false;
}

If you were able to restrict digits, you can also enter '+', I guess you need ASCII table and corresponding value i.e. how you were restricting digits, and charCode > 31 seems useless if you are checking for digits only:
http://www.asciitable.com/
so if you want to check for +
charCode != 43

You need to check for + as well explicitly, modify your if to :
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 43)
Here is working example:
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 43) {
return false;
}
return true;
}
<input type="text" class="textfield" value="" id="extra7" name="extra7" onkeypress="return isNumber(event)" />

Working Demo
Ascii Table
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)&& charCode != 43) {
return false;
}
return true;
}

Limiting number value in an input tag with javascript

I am creating a form and i want the input tag to accept numbers only and i also want to limit the numbers to be from 0 - 20.
This my html code:
<input type="text" name="three" class="actual" id="three" maxlength="2" onkeypress="return ForNumbers(event)" />
This is my javascript code:
<script type="text/javascript">
function ForNumbers(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>

Should be able to do something like this:
if (input.value < 0) input.value = 0;
if (input.value > 20) input.value = 20;
Simple as that if that's what you mean.
You could get this to run when the value for the input changes (onChange) that way they can see the limit.
Full function:
HTML:
<input type="text" onchange="limiter(this);" />
Javascript:
function limiter(input) {
if (input.value < 0) input.value = 0;
if (input.value > 100) input.value = 100;
}
Working Demo

If you need to support old browsers, try this:
function ForNumbers(evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
if (
//0~9
charCode >= 48 && charCode <= 57 ||
//number pad 0~9
charCode >= 96 && charCode <= 105 ||
//backspace
charCode == 8 ||
//tab
charCode == 9 ||
//enter
charCode == 13 ||
//left, right, delete..
charCode >= 35 && charCode <= 46
)
{
//make sure the new value below 20
if(parseInt(this.value+String.fromCharCode(charCode), 10) <= 20)
return true;
}
evt.preventDefault();
evt.stopPropagation();
return false;
}
http://jsfiddle.net/3StSM/2/
It also works fine with:
<input id="numIpt" type="number" min="0" max="20" maxlength="2" />

Use html type number and inline elements min="1" and max="20" to limit your input field.
<input type="number" min="1" max="20" />

Javascript Function to enter only alphabets on keypress

I want to enter only character values inside a <textarea> and numeric values in another. I have been able to make a JavaScript function which only allows numeric values to be entered in the <textarea> using onkeypress. This works in Firefox and Chrome.
For alphabets I am creating another JavaScript function using windows.event property. Only problem is this works only in Chrome and not in Firefox.
I want to know how to allow only alphabets to be entered using onkeypress event as used for entering only numeric values?
function isNumberKey(evt){ <!--Function to accept only numeric values-->
//var e = evt || window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
function ValidateAlpha(evt)
{
var keyCode = (evt.which) ? evt.which : evt.keyCode
if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 123) && keyCode != 32)
return false;
return true;
}
<label for="cname" class="label">The Risk Cluster Name</label>
<textarea id="cname" rows="1px" cols="20px" style="resize:none" placeholder="Cluster Name" onKeyPress="return ValidateAlpha(event);"></textarea>
<br>
<label for="cnum">Risk Cluster Number:</label>
<textarea id="cmun" rows="1px" cols="12px" style="resize:none" placeholder="Cluster Number" onkeypress="return isNumberKey(event)"></textarea>

function lettersOnly()
{
var charCode = event.keyCode;
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || charCode == 8)
return true;
else
return false;
}
<input type="text" name="fname" value="" onkeypress="return lettersOnly(event)"/>

If you don't need to support older browsers I would use the input event. This way you can also catch non-alpha characters if the user pastes text into the textarea.
I cleaned up your HTML a little bit. The most important changes are to the events on cname and cnum. Note that the event in both cases has been changed to oninput.
<label for="cname" class="label"> The Risk Cluster Name</label>
<textarea id="cname" rows="1" cols="20" style="resize:none" placeholder="Cluster Name" oninput="validateAlpha();"></textarea>
<label for="cnum">Risk Cluster Number:</label>
<textarea id="cmun" rows="1" cols="12" style="resize:none" placeholder="Cluster Number" oninput="isNumberKey();"></textarea><br /><br /><br />
Assuming you want cname to only accept characters in the alphabet and cnum to only accept numbers, your JavaScript should be:
function validateAlpha(){
var textInput = document.getElementById("cname").value;
textInput = textInput.replace(/[^A-Za-z]/g, "");
document.getElementById("cname").value = textInput;
}
function isNumberKey(){
var textInput = document.getElementById("cmun").value;
textInput = textInput.replace(/[^0-9]/g, "");
document.getElementById("cmun").value = textInput;
}
This code uses regular expressions, a way to match patterns in strings.

Best Uses
<input type="text" name="checkno" id="checkno" class="form-control" value="" onkeypress="return isNumber(event)"/>
<input type="text" name="checkname" id="checkname" class="form-control" value="" onkeypress="return isAlfa(event)"/>
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
return true;
}

function digitonly(input,event){
var keyCode = event.which ? event.which : event.keyCode;
var lisShiftkeypressed = event.shiftKey;
if(lisShiftkeypressed && parseInt(keyCode) != 9){return false;}
if((parseInt(keyCode)>=48 && parseInt(keyCode)<=57) || keyCode==37/*LFT ARROW*/ || keyCode==39/*RGT ARROW*/ || keyCode==8/*BCKSPC*/ || keyCode==46/*DEL*/ || keyCode==9/*TAB*/ || keyCode==45/*minus sign*/ || keyCode==43/*plus sign*/){return true;}
BootstrapDialog.alert("Enter Digits Only");
input.focus();
return false;
}
function alphaonly(input,event){
var keyCode = event.which ? event.which : event.keyCode;
//Small Alphabets
if(parseInt(keyCode)>=97 && parseInt(keyCode)<=122){return true;}
//Caps Alphabets
if(parseInt(keyCode)>=65 && parseInt(keyCode)<=90){return true;}
if(parseInt(keyCode)==32 || parseInt(keyCode)==13 || parseInt(keyCode)==46 || keyCode==9/*TAB*/ || keyCode==8/*BCKSPC*/ || keyCode==37/*LFT ARROW*/ || keyCode==39/*RGT ARROW*/ ){return true;}
BootstrapDialog.alert("Only Alphabets are allowed")
input.focus();
return false;
}

hi try below code it worked for me in all browsers, it allows numbers and few special characters like,.+-() :
in the textbox use as follows
<asp:Textbox Id="txtPhone" runat="server" onKeyPress="return onlyNumbersandSpecialChar()"> </asp:Textbox>
function onlyNumbersandSpecialChar(evt) {
var e = window.event || evt;
var charCode = e.which || e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57 || charCode > 107 || charCode > 219 || charCode > 221) && charCode != 40 && charCode != 32 && charCode != 41 && (charCode < 43 || charCode > 46)) {
if (window.event) //IE
window.event.returnValue = false;
else //Firefox
e.preventDefault();
}
return true;
}
</script>