We Keep Coding

jQuery only numeric with 2 decimals only with max value

I been trying to create validation function for input to allow only numeric with two decimal point And max value 99999999.99.
This is what I have tried so far but doesn't seems to be working.
$('#TXTCOST').keypress(function (event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
var input = $(this).val();
if ((input.indexOf('.') != -1) && (input.substring(input.indexOf('.')).length > 2)) {
event.preventDefault();
}
var arr = input.split('.');
if (arr.length == 1 && parseFloat(arr[0]) >= 99999999) {
event.preventDefault();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="TXTCOST"/>

My example below uses a simple regex check for 1-8 digits number with optional 0-2 decimal points:
Edit: Now the code prevents the entry of wrong value. This is done in 2 stages
On key press, make a backup of the current input value then limit user input to allowed keys
Validate current input then revert back to the old value if the new value is invalid.
let allowed_keys = [8, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 190];
let my_regex = /^([0-9]{0,8})(\.{1,1}[0-9]{0,2})?$/;
let old_val;
let x = $('#TXTCOST').on('keydown', function (event) {
let input_value = $(this).val().toString();
old_val = input_value;
let found_dots = input_value.match(/\./g) || [];
let split_input_value = input_value.split('.');
let prevent_default = false;
// console.log('value = ' + $(this).val());
let tests = [];
tests.push(() => {
return allowed_keys.includes(event.which);
});
tests.push(() => {
return (event.which !== 190) || ((event.which === 190) && (input_value.length > 0) && (found_dots.length === 0))
});
tests.forEach(function (test, index) {
if (test() === false) {
event.preventDefault();
}
});
}).on('input', function (event) {
let input_value = $(this).val().toString();
let tests = [];
tests.push(() => {
if (my_regex.test(input_value)) {
return true;
} else {
return false;
}
});
tests.forEach((test, index) => {
if (test() === false) {
$(this).val(old_val)
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="TXTCOST"/>

try like this.
$('#TXTCOST').keypress(function (event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
else{
var input = $(this).val();
if ((input.indexOf('.') != -1) && (input.substring(input.indexOf('.')).length > 2)) {
event.preventDefault();
}
var arr = (input+String.fromCharCode(event.keyCode)).split('.');
if (arr.length == 1 && parseFloat(arr[0]) > 99999999) {
event.preventDefault();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="TXTCOST"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="TXTCOST"/>

$('#TXTCOST').keypress(function (event) {
if ((event.which != 46 || $this.val().indexOf('.') != -1) &&
((event.which < 48 || event.which > 57) &&
(event.which != 0 && event.which != 8))) {
event.preventDefault();
}
var input = $(this).val();
if ((input.indexOf('.') != -1) && (input.substring(input.indexOf('.')).length > 2)) {
event.preventDefault();
}
var arr = input.split('.');
if (arr.length == 1 && parseFloat(arr[0]) >= 99999999) {
event.preventDefault();
}
});
try this

Phone Number Jquery validation ... need numbers AND a few other characters

Someone helped me create a jquery contact form, with field validation. There is a phone number field. The field allows for only numbers. We need the field to also contain a few other common "phone" character... such as ()-. and space. Can someone help me modify the code below ...
// only numberic value validation
$( ".only_numberic" ).keypress(function(event){
var inputValue = window.event ? event.keyCode : event.which;
// allow letters and whitespaces only.
if( !( inputValue >= 48 && inputValue <= 57) && (inputValue != 0 && inputValue != 8 && inputValue != 9 ) ) {
event.preventDefault();
}
});
Note: I don't mind that the class is still "only_numberic" (that's only a name) ... just need the validation fixed.
FINAL FIX
Below is the final fix that works.
// only numberic value validation
$( ".only_numberic" ).keypress(function(event){
var inputValue = window.event ? event.keyCode : event.which;
// allow letters and whitespaces only, and () and - and period[.] and (space).
if( !( inputValue >= 48 && inputValue <= 57) && (inputValue != 0 && inputValue != 8 && inputValue != 9 && inputValue!=40 && inputValue!=41 && inputValue!=45 && inputValue!=46 && inputValue!=32) ) {
event.preventDefault();
}
});

Here is the code for that. Copy this function and add "number-input" class to your textbox. It accepts only number and space. You can add more characters by adding ASCII value into this array:
[32,46, 8, 9, 27, 13, 110, 190]
Phone Number: <input type="text" class="number-input">
$(document).on('keydown','.number-input',function(e){
console.log(e.keyCode);
if ($.inArray(e.keyCode, [32,46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});

$(document).ready( function (){ $( "#mobile-num" ).on( "blur" , functi
var mobNum = $( this ).val();
var filter = /^\d*(?:\.\d{1,
if (filter.test(mobNum)) {
if (mobNum.length!= 10 ){
alert( "valid" );
} else {
alert( 'Please put 10
return false;
}
}
else {
alert("not a vaild number");
return false;
} });
});

Validate and append phone input Jquery

I have some input field that always has to have + first in input
HTML
<input id="phone">
JS
$("#phone").keydown(function (e) {
$(this).get(0).value+="+";
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
The problem is you can see in this fiddle
http://fiddle.jshell.net/nqkeuspf/
UPDATE
$("#phone").keydown(function (e) {
var firstChar = $(this).val().substr(0, 1);
// Check first character.
if (firstChar != '+'){
$(this).val('+' + $(this).val())
}
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190,107]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
The problem is that it doesn not check +
Fiddle
http://fiddle.jshell.net/bjsrk83j/3/

Add this as keypress handler. It allows only numbers and you can supply it with a filter to allow other characters like +. Esc allows the user to cancel.
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
function handleInputKey(filter, e) // append filter as string '+-.,' for example.
{
if (!e) {
var e = window.event;
}
//allow only numeric input
//48-57 and 96-105 (keyboard left and numpad)
//also delete, back space, esc, enter, arrows and tab
if ((filter && filter.match(escapeRegExp(String.fromCharCode(e.which)))) || ((e.keyCode >= 48 && e.keyCode <= 57) && (!e.shiftKey && !e.altKey && !e.ctrlKey))) {
return true;
} else {
e.preventDefault();
return false;
}
}
//the onkeydown handler
function handleInputKeyFinish(e) {
if (!e) {
var e = window.event;
}
if (e.keyCode == 27) {
this.blur();
}
}
function stripAndAppendPlus(e) {
//when the users pastes a value delete invalid characters.
e.target.value = e.target.value.replace(/[^0-9]/g, "");
e.target.value = "+" + e.target.value;
}
$("#phone").keydown(handleInputKeyFinish);
$("#phone").keypress(handleInputKey.bind($("#phone")[0], null));
$("#phone").blur(stripAndAppendPlus);
Solution in Fiddle: http://fiddle.jshell.net/bqa87bwh/1/
Even simpler not using jQuery or JavaScript. This is HTML5 so not compatible with older browsers.
<input type="phone" pattern="^\+?\d{7,13}$" required />
pattern checks the input against a reg ex. This reg ex allows phone numbers consisting out of 7 to 13 numbers and they can begin with a +.
required --> this field has to contain a value otherwise the form won't be submitted.
Solution in Fiddle: http://fiddle.jshell.net/e76t41rj/1/

jQuery only digits in input

I want only numbers in my input. I can't change type of input to "number". So I have this code.
Number : <input type="text" name="quantity" id="quantity" />
<script>
$(document).ready(function() {
$("#quantity").off("keyup").on("keyup", function(e) {
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
});
});
And it's not works but if i change selector to $("#quantity").off("keyup").on("keyup", function(e) { It works. I haven't change the first selector

try like this,
function isNumber(n){
return (parseFloat(n) == n);
}
$("document").ready(function(){
$("input").keyup(function(event){
var input = $(this).val();
if(!isNumber(input)){
$(this).val(input.substring(0, input .length-1));
}
});
});
Demo

jquery only allow input float number

i'm making some input mask that allows only float number. But current problem is I can't check if multiple dots entered. Can you check those dots and prevent it for me?
Live Code: http://jsfiddle.net/thisizmonster/VRa6n/
$('.number').keypress(function(event) {
if (event.which != 46 && (event.which < 47 || event.which > 59))
{
event.preventDefault();
if ((event.which == 46) && ($(this).indexOf('.') != -1)) {
event.preventDefault();
}
}
});

You can check for the period in the same statement.
Also, you need to use the val method to get the value of the element.
Also, you want to check for the interval 48 to 57, not 47 to 59, otherwise you will also allow /, : and ;.
jQuery(document).ready(function() {
$('.float-number').keypress(function(event) {
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
Enter Number:
<input type="text" name="number" value="" class="float-number">
</body>
</html>

I think you guys have missed the left right arrows, delete and backspace keys.
$('.number').keypress(function(event) {
if(event.which == 8 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46)
return true;
else if((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57))
event.preventDefault();
});

I think everybody forgot the case of pasting text with the mouse, in which you can't detect the keystrokes, because there's none. Here's another approach I have been working on.
// only integer or float numbers (with precision limit)
// example element: <input type="text" value="" class="number" name="number" id="number" placeholder="enter number" />
$('.number').on('keydown keypress keyup paste input', function () {
// allows 123. or .123 which are fine for entering on a MySQL decimal() or float() field
// if more than one dot is detected then erase (or slice) the string till we detect just one dot
// this is likely the case of a paste with the right click mouse button and then a paste (probably others too), the other situations are handled with keydown, keypress, keyup, etc
while ( ($(this).val().split(".").length - 1) > 1 ) {
$(this).val($(this).val().slice(0, -1));
if ( ($(this).val().split(".").length - 1) > 1 ) {
continue;
} else {
return false;
}
}
// replace any character that's not a digit or a dot
$(this).val($(this).val().replace(/[^0-9.]/g, ''));
// now cut the string with the allowed number for the integer and float parts
// integer part controlled with the int_num_allow variable
// float (or decimal) part controlled with the float_num_allow variable
var int_num_allow = 3;
var float_num_allow = 1;
var iof = $(this).val().indexOf(".");
if ( iof != -1 ) {
// this case is a mouse paste (probably also other events) with more numbers before the dot than is allowed
// the number can't be "sanitized" because we can't "cut" the integer part, so we just empty the element and optionally change the placeholder attribute to something meaningful
if ( $(this).val().substring(0, iof).length > int_num_allow ) {
$(this).val('');
// you can remove the placeholder modification if you like
$(this).attr('placeholder', 'invalid number');
}
// cut the decimal part
$(this).val($(this).val().substring(0, iof + float_num_allow + 1));
} else {
$(this).val($(this).val().substring(0, int_num_allow));
}
return true;
});

Good for integer and float values. Plus, copy/paste clipboard event.
var el = $('input[name="numeric"]');
el.prop("autocomplete",false); // remove autocomplete (optional)
el.on('keydown',function(e){
var allowedKeyCodesArr = [9,96,97,98,99,100,101,102,103,104,105,48,49,50,51,52,53,54,55,56,57,8,37,39,109,189,46,110,190]; // allowed keys
if($.inArray(e.keyCode,allowedKeyCodesArr) === -1 && (e.keyCode != 17 && e.keyCode != 86)){ // if event key is not in array and its not Ctrl+V (paste) return false;
e.preventDefault();
} else if($.trim($(this).val()).indexOf('.') > -1 && $.inArray(e.keyCode,[110,190]) != -1){ // if float decimal exists and key is not backspace return fasle;
e.preventDefault();
} else {
return true;
};
}).on('paste',function(e){ // on paste
var pastedTxt = e.originalEvent.clipboardData.getData('Text').replace(/[^0-9.]/g, ''); // get event text and filter out letter characters
if($.isNumeric(pastedTxt)){ // if filtered value is numeric
e.originalEvent.target.value = pastedTxt;
e.preventDefault();
} else { // else
e.originalEvent.target.value = ""; // replace input with blank (optional)
e.preventDefault(); // retur false
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="numeric" value="" placeholder="insert value">
[2017-10-31] Vanilla.js
let el = document.querySelector('input[name="numeric"]');
el.addEventListener('keypress',(event) => {
let k = event.key,
t = isNaN(k),
sc = ['Backspace'].indexOf(k) === -1,
d = k === '.',dV = el.value.indexOf('.') > -1,
m = k === '-',mV = el.value.length > 0;
if((t && sc) && ((d && dV) || (m && dV) || (m && mV) || ((t && !d) && (t && !m)))){event.preventDefault();}
},false);
el.addEventListener('paste',(event) => {
if(event.clipboardData.types.indexOf('text/html') > -1){
if(isNaN(event.clipboardData.getData('text'))){event.preventDefault();}
}
},false);
<input type="text" name="numeric">

Your code seems quite fine but overcomplicated.
First, it is $(this).val().indexOf, because you want to do something with the value.
Second, the event.which == 46 check is inside an if clause that's only passed when event.which != 46, which can never be true.
I ended up with this which works: http://jsfiddle.net/VRa6n/3/.
$('.number').keypress(function(event) {
if(event.which < 46
|| event.which > 59) {
event.preventDefault();
} // prevent if not number/dot
if(event.which == 46
&& $(this).val().indexOf('.') != -1) {
event.preventDefault();
} // prevent if already dot
});

I found this way to do this,
$.validator.addMethod("currency", function (value, element) {
return this.optional(element) || /^\$(\d{1,3}(\,\d{3})*|(\d+))(\.\d{2})?$/.test(value);
}, "Please specify a valid amount");
https://gist.github.com/jonkemp/9094324

HTML
<input type="text" onkeypress="return isFloatNumber(this,event)" />
Javascript
function isFloatNumber(item,evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode==46)
{
var regex = new RegExp(/\./g)
var count = $(item).val().match(regex).length;
if (count > 1)
{
return false;
}
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
jsfiddle.net

Using JQuery.
$(document).ready(function()
{
//Only number and one dot
function onlyDecimal(element, decimals)
{
$(element).keypress(function(event)
{
num = $(this).val() ;
num = isNaN(num) || num === '' || num === null ? 0.00 : num ;
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57))
{
event.preventDefault();
}
if($(this).val() == parseFloat(num).toFixed(decimals))
{
event.preventDefault();
}
});
}
onlyDecimal("#TextBox1", 3) ;
});

One-more plugin, based on Carlos Castillo answer
https://github.com/nikita-vanyasin/jquery.numberfield.js
Adds method to jQuery object:
$('input.my_number_field').numberField(options);
where options is (you can pass any or no options):
{
ints: 2, // digits count to the left from separator
floats: 6, // digits count to the right from separator
separator: "."
}

Using jQuery and allowing negative floats :
// Force floats in '.js_floats_only' inputs
$(document).ready(function() {
$('.js_floats_only').each(function() {
// Store starting value in data-value attribute.
$(this).data('value', this.value);
});
});
$(document).on('keyup', '.js_floats_only', function() {
var val = this.value;
if ( val == '-' ) {
// Allow starting with '-' symbol.
return;
} else {
if ( isNaN(val) ) {
// If value is not a number put back previous valid value.
this.value = $(this).data('value');
} else {
// Value is valid, store it inside data-value attribute.
$(this).data('value', val);
}
}
});

For simple cases and without hardcoding some html instructions would fit that pretty enough
<input type="number" step="0.01"/>

$('.number').keypress(function(event){
if($.browser.mozilla == true){
if (event.which == 8 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 9 || event.keyCode == 16 || event.keyCode == 46){
return true;
}
}
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
This works in all browsers.

<input type="text" data-textboxtype="numeric" />
<script>
$(document).on('keydown', '[data-textboxtype="numeric"]', function (e) {
// Allow: backspace, delete, tab, escape, enter and . and -
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190, 109, 189]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return true;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
return false;
}
return true;
});
</script>

Below Code I am allowing only Digits and Dot symbol.
ASCII characters number starts in 47 and ends with 58 and dot value is 190.
$("#Experince").keyup(function (event) {
debugger
if ((event.which > 47
&& event.which < 58) ||event.which== 190) {
if ($("#Experince").val().length > 3) {
}
} // prevent if not number/dot
else {
$("#Experince").val($("#Experince").val().slice(0, -1))
}
});