Number validate at keypress - javascript

I validate the phone number using below code its working fine but i allow char at first time while user entering the values. how i can solve it. . . .
$('.Number').keypress(function () {
$('.Number').keypress(function (event) {
var keycode;
keycode = event.keyCode ? event.keyCode : event.which;
if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 ||
keycode == 37 ||keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
event.preventDefault();
}
});
});

The first character is unrestricted because you have nested keypress handlers. Try this:
$('.Number').keypress(function (event) {
var keycode = event.which;
if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
event.preventDefault();
}
});

Try
$('.Number').keyup(function (event) {
var keycode = event.which;
if (!(event.shiftKey == false && (keycode == 46 || keycode == 8 || keycode == 37 || keycode == 39 || (keycode >= 48 && keycode <= 57)))) {
event.preventDefault();
}
});

Here is a function that will validate the input. It will return true if the value is a number, false otherwise. Numbers are charcode 48 - 57. This function also allows all control characters to return true. (<32)
function isNumber(evt)
{
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 32 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
Here is a chart of the codes.

<html>
<head>
<title>number validation</title>
<script>
function checkNumber(check)
{
var a = document.getElementById("txt_contact_no").value;
//var x=check.which;
//var x = a.charCode;
var x = a.keyCode;
if(!(a >= 48 || a <= 57))
{
alert("enter only numbers");
return false;
}
else if(a=="" || a==null)
{
alert("field is blank");
return false;
}
// if no is more then the value
/*else if (a.length <= 9)
{
alert("enter minimum 10 characters");
return false;
}*/
alert("done");
return true;
}
</script>
</script>
</head>
<body>
<table>
<form name=form1 method=post action="#">
<tr>
<td>
<b>Subjects</b><input type="text" name="contact_no" id="txt_contact_no" onblur="checkNumber(this)">
</td>
</tr>
<tr>
<td><p id="p1"></p></td>
</tr>
</form>
</table>
</body>

This is the simplest solution for KeyPress Number Events:
$(document).ready(function(){
$(".Number").keypress(function(event){
var keycode = event.which;
if (!(keycode >= 48 && keycode <= 57)) {
event.preventDefault();
}
});
});

Related

How to create a textbox in html to accept only real number using jquery?

$("#chartModal").keypress( function (e) {
if (e.which != 8 && e.which != 0 && e.which != 43 && e.which != 45 && e.which != 46 && (e.which < 48 || e.which > 57)) {
return false;
}
});
This accept +, - & . in between the number, which is not a number.
Try with this
$(document).ready(function () {
$('#chartModal').keypress(function(e) {
var key = e.charCode || e.keyCode || 0;
var keychar = String.fromCharCode(key);
if ( ((key == 8 || key == 9 || key == 46 || key == 35 || key == 36 || (key >= 37 && key <= 40)) && e.charCode==0) /* backspace, end, begin, top, bottom, right, left, del, tab */
|| (key >= 48 && key <= 57) ) { /* 0-9 */
return;
} else {
e.preventDefault();
}
});
});
Here is an example:
$('#chartModal').keypress(function(e){
if (e.which != 8 && e.which != 0 &&e.which!= 43 && e.which!=45 && e.which !=46 &&(e.which < 48 || e.which > 57)) {
return false;
}
var charCode = e.which;
var value=$(this).val();
if(charCode==43 && value.indexOf('+')>=0) //Check whether a + is already there at beginning
return false;
if (charCode == 45 && value.indexOf('-') >= 0)//Check whether a - is already there at beginning
return false;
if (charCode == 46 && value.indexOf('.')!=-1)//Check at least one . is present in the number
return false;
});
Replace #idname with id of input.

allow only float number with backspace and left and right arrow

I want to allow only one . in textfield, with backspace, left and right arrow.
I found this this link.
only allow numbers, backspace, delet, left arrow and right arrow keys in textbox
I addded one more validation in above code, so that user can add only . in textfield, but it's not working.
JS
function validateQty(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39 ) {
if($(this).val().indexOf('.') == -1)
return true;
else
return false;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
JSFiddle
The problem as I see it is that in the line if($(this).val().indexOf('.') == -1), the this is the Window object not the input control.
Try adding an ID to the input control and reference the same in the code as:
function validateQty(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39 ) {
if($('#IdofInputControl').val().indexOf('.') == -1)
return true;
else
return false;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" ID="IdofInputControl" onkeypress='return validateQty(event);'>
And your validation 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)&&(evt.which != 46 || $('#refAmount').val().indexOf('.') != -1)) {
return false;
}
return true;
}
You can use following code with some modifications of keys which you want to use or not.
jQuery("#YourSelector").keypress(function (evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 43 || charCode > 57)){
return false;
}else{
return true;
}
});

How to avoid entering special characters in JavaScript

On html I have one input box in which I just want to enter numeric values. I used following function:
function allowNumbersOnly(event,locale) {
if(locale=='en' && (event.keyCode==190 || event.keyCode==110)){
return true;
}
else if(locale=='nl' && (event.keyCode==188 || event.keyCode==190 || event.keyCode==110)){
return true;
}
if(event.keyCode==189 || (event.keyCode==109) ){
return true;
}
var key = event.charCode || event.keyCode || 0;
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
if (
key == 8 ||
key == 9 ||
key == 46 ||
(key >= 37 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105)){
}else{
event.preventDefault();
}
}
This code works fine. But when I am pressing shift key+ any number from keyboard then special character gets entered. Can anyone tell me how to solve this issue?
Try the following function
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;
}
If you are using HTML5 just try
<input type="number">
Try like this:
function blockspecialcharacter(e) {
var key= document.all ? key= e.keyCode : key= e.which;
return ((key > 64 && key < 91) || (key> 96 && key< 123) || key== 8 || key== 32 || (key>= 48 && key<= 57));
}
Check demo here
shiftKey event attribute returns a Boolean value that indicates whether or not the "SHIFT" key was pressed
if (event.shiftKey==1)
{
alert("The shift key was pressed!")
}
else
{
alert("The shift key was NOT pressed!")
}
so you can exit from your function if shift is pressed using value of event.shiftKey
// in your code
function allowNumbersOnly(event,locale) {
if (event.shiftKey==1) {
return false;
} // RETURN if shift key got clicked.
if (locale=='en' && (event.keyCode==190 || event.keyCode==110)) {
return true;
}
else if (locale=='nl' && (event.keyCode == 188 ||
event.keyCode == 190 ||
event.keyCode == 110)) {
return true;
}
if (event.keyCode==189 || (event.keyCode==109)) {
return true;
}
var key = event.charCode || event.keyCode || 0;
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
if (key == 8 ||
key == 9 ||
key == 46 ||
(key >= 37 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105)) {
}
else {
event.preventDefault();
}
}
Try this:
function blockSpecialChars(e){
var e = e || window.event;
var k = e.which || e.keyCode;
var s = String.fromCharCode(k);
return !/^[\\\"\'\;\:\>\|~`!##\$%^&*\(\)]$/i.test(s);
}
Add or remove the special characters from the above code to make it as you need.

How to allow numbers, backspace, delete, left and right arrow keys in the html text?

I am using following javascript code which I think should only allow numbers, backspace, delet, left arrow and right arrow keys in textbox, but it is also allowing alphabets. I don't know why?
function validateQty(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode == 8 || event.keyCode == 46
|| event.keyCode == 37 || event.keyCode == 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
Calling this function as
<input type="text" onkeypress='validateQty(event)'>
No doubt your code is correct but you missed "return" keyword in textbox.
<input type="text" onkeypress='return validateQty(event);'>
You can see the code here
<input type="text" class="form-control" id="dompetku_msisdn" name="dompetku_msisdn" placeholder="Phone Number" aria-describedby="helpBlock" onkeydown='return (event.which >= 48 && event.which <= 57) || event.which == 8 || event.which == 46 || event.which == 37 || event.which == 39' required /> </input>
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<HTML>
<HEAD>
</HEAD>
<BODY>
<input id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar" maxlength="10">
</BODY>
</HTML>
const validateQty = (event) => {
var key = window.event ? event.keyCode : event.which;
console.log(event);
if (event.keyCode === 8 || event.keyCode === 46
|| event.keyCode === 37 || event.keyCode === 39) {
return true;
} else if (key < 48 || key > 57) {
return false;
} else { return true; }
};
<input type="text" onkeydown='return validateQty(event);'>
I modified his code a bit, so you can just add a class to an input
$(".numberonly").keydown(function(e){
// Number Only
if (e.keyCode == 8 || e.keyCode == 46
|| e.keyCode == 37 || e.keyCode == 39) {
return true;
}
else if ( e.keyCode < 48 || e.keyCode > 57 ) {
e.preventDefault();
}
});
add class to an input
<input type="text" class="numberonly" />

Enable dot and Tab in textboxes

I have text boxes which only allow to enter numeric values. I handled it using a JavaScript. But it doesn't allow me to enter dot and tab movement. I need those two as well. How to change this code to enter dot symbol and tab movement.
function CheckNumeric(e) {
if (window.event) // IE
{
if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8) {
event.returnValue = false;
return false;
}
}
else // Fire Fox
{
if ((e.which < 48 || e.which > 57) & e.which != 8) {
e.preventDefault();
return false;
}
}
this code is tested and works..this may help u..!!
<script type="text/javascript">
function onlyDotsAndNumbers(txt, event) {
var charCode = (event.which) ? event.which : event.keyCode
if (charCode == 46) {
if (txt.value.indexOf(".") < 0)
return true;
else
return false;
}
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
> <asp:TextBoxID="txt1"runat="server"onkeypress="return onlyDotsAndNumbers(this,event)"/>

Categories