We Keep Coding

How to disAllow minus (-) in text box

Here I have a function which only allows numeric and percentage. But it is allowing minus(-), I want to restrict that minus in that script. How can I restrict.Here is my script.Or please suggest me a dirctive for this.
function validateQty(el, evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode != 45 && charCode != 8 && charCode != 37 && (charCode != 46) && (charCode < 48 || charCode > 57))
return false;
if (charCode == 46) {
if ((el.value) && (el.value.indexOf('.') >= 0))
return false;
else
return true;
}
return true;
var charCode = (evt.which) ? evt.which : event.keyCode;
var number = evt.value.split('.');
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
};

You can allow what you want to be as input. Do something like this.
function restrictInput(el) {
el.addEventListener('input', function(e) {
if (!e.target.value.match(/^\d+$|%$/)) {
e.target.value = e.target.value.slice(0, -1)
}
console.log(e.target.value);
})
}
restrictInput(document.getElementById("input1"));
restrictInput(document.getElementById("input2"));
<input id="input1">
<input id="input2">
updated: As asked by OP. A generic function to handle inputs.
NOTE: You can add more restrictions as you want inside this function

You could use input=number
<input type="number" min="0" />
Using javascript you could do:
// Select your input element.
var numInput = document.querySelector('input');
// Listen for input event on numInput.
numInput.addEventListener('input', function () {
// Let's match only digits.
var num = this.value.match(/^\d+$/);
if (num === null) {
// If we have no match, value will be empty.
this.value = "";
}
}, false)
If the data from the input field will be sent to the server, make sure to add this validation on the server too.

I think you can simplify your script by just testing it against a regular expression.
So your function would essentially change to something like this
function validateQty(el, evt)
{
var regex = new RegExp(/^\d+$|%$/);
return regex.test(el.value);
};
JSFiddle

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;
}
});

textbox validation for two numbers and two decimal values in asp.net with javascript

How to check textbox validation for two numbers and two decimal values in asp.net with javascript?
For Example whien i press the key in textbox it should allow me only xx.xx format, example : 12.25, 25.50,48.45 etc.

I got the answer.
<div>
<asp:TextBox ID="TextBox2" runat="server"
onkeypress="return isDecimalNumber(event,this);" MaxLength="5">
</asp:TextBox>
</div>
<script type="text/javascript" language="javascript">
var count = 0;
function isDecimalNumber(evt, c) {
count = count + 1;
var charCode = (evt.which) ? evt.which : event.keyCode;
var dot1 = c.value.indexOf('.');
var dot2 = c.value.lastIndexOf('.');
if (count > 2 && dot1 == -1) {
c.value = "";
count = 0;
}
if (dot1 > 2) {
c.value = "";
}
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
return false;
else if (charCode == 46 && (dot1 == dot2) && dot1 != -1 && dot2 != -1)
return false;
return true;
}
</script>

Try this,
$('.TextBox2').keypress(function (event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
var text = $(this).val();
if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2)) {
event.preventDefault();
}
});

http://jsfiddle.net/hibbard_eu/vY39r/
$("#amount").on("keyup", function(){
var valid = /^\d{0,2}(\.\d{0,2})?$/.test(this.value),
val = this.value;
if(!valid){
console.log("Invalid input!");
this.value = val.substring(0, val.length - 1);
}
});

Number validate at keypress

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();
}
});
});

Allow only numbers and dot in script

Am using this javascript for restrict users to type only numbers and only one dot as decimal separator.
<script type="text/javascript">
function fun_AllowOnlyAmountAndDot(txt)
{
if(event.keyCode > 47 && event.keyCode < 58 || event.keyCode == 46)
{
var txtbx=document.getElementById(txt);
var amount = document.getElementById(txt).value;
var present=0;
var count=0;
if(amount.indexOf(".",present)||amount.indexOf(".",present+1));
{
// alert('0');
}
/*if(amount.length==2)
{
if(event.keyCode != 46)
return false;
}*/
do
{
present=amount.indexOf(".",present);
if(present!=-1)
{
count++;
present++;
}
}
while(present!=-1);
if(present==-1 && amount.length==0 && event.keyCode == 46)
{
event.keyCode=0;
//alert("Wrong position of decimal point not allowed !!");
return false;
}
if(count>=1 && event.keyCode == 46)
{
event.keyCode=0;
//alert("Only one decimal point is allowed !!");
return false;
}
if(count==1)
{
var lastdigits=amount.substring(amount.indexOf(".")+1,amount.length);
if(lastdigits.length>=2)
{
//alert("Two decimal places only allowed");
event.keyCode=0;
return false;
}
}
return true;
}
else
{
event.keyCode=0;
//alert("Only Numbers with dot allowed !!");
return false;
}
}
</script>
<td align="right">
<asp:TextBox ID="txtQ1gTarget" runat="server" Width="30px" CssClass="txtbx" MaxLength="6" onkeypress="return fun_AllowOnlyAmountAndDot(this);"></asp:TextBox>
</td>
But the onkeypress(this) event returns object required error in that function at this place
var amount = document.getElementById(txt).value;
What's my mistake here?

This is a great place to use regular expressions.
By using a regular expression, you can replace all that code with just one line.
You can use the following regex to validate your requirements:
[0-9]*\.?[0-9]*
In other words: zero or more numeric characters, followed by zero or one period(s), followed by zero or more numeric characters.
You can replace your code with this:
function validate(s) {
var rgx = /^[0-9]*\.?[0-9]*$/;
return s.match(rgx);
}
That code can replace your entire function!
Note that you have to escape the period with a backslash (otherwise it stands for 'any character').
For more reading on using regular expressions with javascript, check this out:
http://www.regular-expressions.info/javascript.html
You can also test the above regex here:
http://www.regular-expressions.info/javascriptexample.html
Explanation of the regex used above:
The brackets mean "any character inside these brackets." You can use a hyphen (like above) to indicate a range of chars.
The * means "zero or more of the previous expression."
[0-9]* means "zero or more numbers"
The backslash is used as an escape character for the period, because period usually stands for "any character."
The ? means "zero or one of the previous character."
The ^ represents the beginning of a string.
The $ represents the end of a string.
Starting the regex with ^ and ending it with $ ensures that the entire string adheres to the regex pattern.
Hope this helps!

Use Jquery instead. Add a decimal class to your textbox:
<input type="text" class="decimal" value="" />
Use this code in your JS. It checks for multiple decimals and also restrict users to type only numbers.
$('.decimal').keyup(function(){
var val = $(this).val();
if(isNaN(val)){
val = val.replace(/[^0-9\.]/g,'');
if(val.split('.').length>2)
val =val.replace(/\.+$/,"");
}
$(this).val(val);
});​
Check this fiddle: http://jsfiddle.net/2YW8g/
Hope it helps.

Just add the code below in your input text:
onkeypress='return event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)'

Instead of using this:
onkeypress="return fun_AllowOnlyAmountAndDot(this);"
You should use this:
onkeypress="return fun_AllowOnlyAmountAndDot(this.id);"

function isNumberKey(evt,id)
{
try{
var charCode = (evt.which) ? evt.which : event.keyCode;
if(charCode==46){
var txt=document.getElementById(id).value;
if(!(txt.indexOf(".") > -1)){
return true;
}
}
if (charCode > 31 && (charCode < 48 || charCode > 57) )
return false;
return true;
}catch(w){
alert(w);
}
}
<html>
<head>
</head>
<body>
<INPUT id="txtChar" onkeypress="return isNumberKey(event,this.id)" type="text" name="txtChar">
</body>
</html>

<input type="text" class="decimal" value="" />
$('.decimal').keypress(function(evt){
return (/^[0-9]*\.?[0-9]*$/).test($(this).val()+evt.key);
});
I think this simple solution may be.

This works best for me.
I also apply a currency formatter on blur where the decimal part is rounded at 2 digits just in case after validating with parseFloat.
The functions that get and set the cursor position are from Vishal Monpara's blog. I also do some nice stuff on focus with those functions. You can easily remove 2 blocks of code where 2 decimals are forced if you want and get rid of the set/get caret functions.
<html>
<body>
<input type="text" size="30" maxlength="30" onkeypress="return numericValidation(this,event);" />
<script language="JavaScript">
function numericValidation(obj,evt) {
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
if (charCode == 46) { //one dot
if (obj.value.indexOf(".") > -1)
return false;
else {
//---if the dot is positioned in the middle give the user a surprise, remember: just 2 decimals allowed
var idx = doGetCaretPosition(obj);
var part1 = obj.value.substr(0,idx),
part2 = obj.value.substring(idx);
if (part2.length > 2) {
obj.value = part1 + "." + part2.substr(0,2);
setCaretPosition(obj, idx + 1);
return false;
}//---
//allow one dot if not cheating
return true;
}
}
else if (charCode > 31 && (charCode < 48 || charCode > 57)) { //just numbers
return false;
}
//---just 2 decimals stubborn!
var arr = obj.value.split(".") , pos = doGetCaretPosition(obj);
if (arr.length == 2 && pos > arr[0].length && arr[1].length == 2)
return false;
//---
//ok it's a number
return true;
}
function doGetCaretPosition (ctrl) {
var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
function setCaretPosition(ctrl, pos){
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
</script>
</body>
</html>

function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 46 || charCode > 57)) {
return false;
}
return true;
}
you should use this function and write the properties of this element ;
HTML Code:
<input id="deneme" data-mini="true" onKeyPress="return isNumber(event)" type="text"/>`

try This Code
var check = function(evt){
var data = document.getElementById('num').value;
if((evt.charCode>= 48 && evt.charCode <= 57) || evt.charCode== 46 ||evt.charCode == 0){
if(data.indexOf('.') > -1){
if(evt.charCode== 46)
evt.preventDefault();
}
}else
evt.preventDefault();
};
document.getElementById('num').addEventListener('keypress',check);
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text" id="num" value="" />
</body>
</html>

<script type="text/javascript">
function numericValidation(txtvalue) {
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;
if (!(document.getElementById(txtvalue.id).value))
{
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
else {
var val = document.getElementById(txtvalue.id).value;
if(charCode==46 || (charCode > 31 && (charCode > 47 && charCode < 58)) )
{
var points = 0;
points = val.indexOf(".", points);
if (points >= 1 && charCode == 46)
{
return false;
}
if (points == 1)
{
var lastdigits = val.substring(val.indexOf(".") + 1, val.length);
if (lastdigits.length >= 2)
{
alert("Two decimal places only allowed");
return false;
}
}
return true;
}
else {
alert("Only Numarics allowed");
return false;
}
}
}
</script>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtHDLLevel" MaxLength="6" runat="server" Width="33px" onkeypress="return numericValidation(this);" />
</div>
</form>

You can use this
Javascript
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)&&(charCode!=46)) {
return false;
}
return true;
}
Usage
<input onkeypress="return isNumber(event)" class="form-control">

This function will prevent entry of anything other than numbers and a single dot.
function validateQty(el, evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode != 45 && charCode != 8 && (charCode != 46) && (charCode < 48 || charCode > 57))
return false;
if (charCode == 46) {
if ((el.value) && (el.value.indexOf('.') >= 0))
return false;
else
return true;
}
return true;
var charCode = (evt.which) ? evt.which : event.keyCode;
var number = evt.value.split('.');
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
};
<input type="text" onkeypress='return validateQty(this,event);'>

Try this for multiple text fileds (using class selector):
Click here for example..
var checking = function(event){
var data = this.value;
if((event.charCode>= 48 && event.charCode <= 57) || event.charCode== 46 ||event.charCode == 0){
if(data.indexOf('.') > -1){
if(event.charCode== 46)
event.preventDefault();
}
}else
event.preventDefault();
};
function addListener(list){
for(var i=0;i<list.length;i++){
list[i].addEventListener('keypress',checking);
}
}
var classList = document.getElementsByClassName('number');
addListener(classList);
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text" class="number" value="" /><br><br>
<input type="text" class="number" value="" /><br><br>
<input type="text" class="number" value="" /><br><br>
<input type="text" class="number" value="" /><br><br>
</body>
</html>

<script type="text/Javascript">
function checkDecimal(inputVal) {
var ex = /^[0-9]+\.?[0-9]*$/;
if (ex.test(inputVal.value) == false) {
inputVal.value = inputVal.value.substring(0, inputVal.value.length - 1);
}
}
</script>

In this function there is an error while editing it when I have added 2 digits(I have defined it's limit 2) after decimal point than it returns false, like if we have to change 1486.00 to 1582.00 without clearing the whole input or deleting any number after decimal point it will return false.
There is a small change required, where the condition of count is 1(count === 1) there add a condition event.target.selectionStart > amount.indexOf(".")
The final code will be
const validDecimal = (event) => {
if ((event.charCode > 47 && event.charCode < 58) || event.charCode === 46) {
var amount = event.target.value;
var present = 0;
var count = 0;
do {
present = amount.indexOf(".", present);
if (present != -1) {
count++;
present++;
}
} while (present != -1);
if (present === -1 && amount.length === 0 && event.charCode === 46) {
event.charCode = 0;
// alert("Wrong position of decimal point not allowed !!");
return false;
}
if (count >= 1 && event.charCode === 46) {
event.charCode = 0;
// alert("Only one decimal point is allowed !!");
return false;
}
if (count === 1 && event.target.selectionStart > amount.indexOf(".")) {
var lastdigits = amount.substring(
amount.indexOf(".") + 1,
amount.length
);
if (lastdigits.length >= 2) {
// alert("Two decimal places only allowed");
event.charCode = 0;
return false;
}
}
return true;
} else {
event.charCode = 0;
// alert("Only Numbers with dot allowed !!");
return false;
}
};

Please try below code. this could help you to solve it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function fnAllowNumbersAndDotKey(input, event)
{
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode == 46)
{
//only one dot (.) allow
if (input.value.indexOf('.') === -1)
{
return true;
}
else
{
return false;
}
}
else
{
if (charCode > 31 && (charCode < 48 || charCode > 57))
{
return false;
}
}
return true;
}
</script>
</head>
<body>
<form method='post' >
<input type="text" name='amount' class='form-control' onkeypress="return fnAllowNumbersAndDotKey(this, event);" maxlength="50" />
</form>
</body>
</html>

<input type="text" class="form-control" id="odometer_reading" name="odometer_reading" placeholder="Odometer Reading" onblur="odometer_reading1();" onkeypress='validate(event)' required="" />
<script>
function validate(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();
}
}
</script>

Hope this could help someone
$(document).on("input", ".numeric", function() {
this.value = this.value.match(/^\d+\.?\d{0,2}/);});