We Keep Coding

String length and alphanumeric validation using jQuery

I want to validate the string which the user enters into a textbox. I have to prevent user from entering alpha characters into the textbox and I also want to restrict user to entering no more than 6 digits, and also prevent the user from entering special characters into the textbox. I have tried the below code which is working when the user manually enters the value in textbox, but it's not working when the user pastes the some code into textbox.
<input type="text" name="textbox" id="textbox" class="form-control" required>
$("#textbox").on('keypress', function(e) {
var length = 6;
var validationtype = 'numeric';
var stringLength = $('#textbox').val().length;
if(stringLength < length) {
if(validationtype == 'alphanumeric') {
if (e.which != 8 && e.which != 0 && ((e.which < 65 || e.which > 122) || (e.which < 48 || e.which > 57))) {
return false;
}
} else if (validationtype == 'numeric') {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
}
} else {
return false;
}
});

Just use Paste event to handle this the same way.
/*Click and Past events*/
$("#textbox").on('keypress', function(e) {
return onTextChange(e, this);
});
$("#textbox").on("paste", function(e){
return onTextChange(e, this);
});
/*--------------------*/
function onTextChange(e, thisRef){
let length = 6;
let stringLength = $(thisRef).val().length;
let validationtype = 'numeric';
if(stringLength < length && e.which !== undefined) {
if(validationtype == 'alphanumeric') {
if (e.which != 8 && e.which != 0 && ((e.which < 65 || e.which > 122) || (e.which < 48 || e.which > 57))) {
return false;
}
} else if (validationtype == 'numeric') {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
}
} else {
return false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="textbox" id="textbox" class="form-control" required>

allow tab and other keys in input textbox

Below is my javascript code which restrict the user for following:
1) only allow numeric and upto two decimal points.
It also restrict the user for tab, backspace , delete, left and right arrow keys.
I tried by adding condition event.which != 8/9/37/38 but not succeed.
Below is the code:
$('#txtprice').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();
}
});
can any one please correct me here.
EDITED: Modified as below but not work.
$('#txtprice').keypress(function (event) {
if (event.which == 8 || event.which == 9 || event.which == 37 || event.which == 38) {
event.preventDefault();
return;
}
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();
}
});
Thanks

You simply just have to allow what you want, not determine what you don't want. This is easy by determining if the keyCode is a period (190) or in between 48 and 57.
function validateNum(e) {
var elem = document.getElementById("txtprice");
if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode == 190) {
var txt = elem.value;
if (e.keyCode == 190 && txt.match(new RegExp('\\.','g')).length > 1) {
e.preventDefault();
}
} else {
e.preventDefault();
}
}
Here is a working js fiddle: http://jsfiddle.net/e72uqvbv/
UPDATE: I miss understood the period situation request, I have updated my answer.

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 - How do I add an alert message to this jquery code base?

The Question
To help avoid end-user confusion, I want to add an alert message that pops up if/when the user clicks any other key ["alert('Only Numerical data allowed')"]. So if they press the 'k' the above message will pop up. Can anyone see how to set this code within this code base
jsfiddle: http://jsfiddle.net/EN8pT/4/
The Code
jquery:
$('input.numberinput').bind('keypress', function (e) {
var w = e.which;
return (w != 8 && w != 0 && (w < 48 || w > 57) && w != 46) ? false : true;
});
​
html
<div class="containercontent">
<div class="label">Enter a number:</div>
<input type="text" name="txtNumber1" id="txtNumber1" value="" class="numberinput" />
<div class="label">Enter a number:</div>
<input type="text" name="txtNumber2" id="txtNumber2" value="" class="numberinput" />
</div>

Simple :
$(document).ready(function () {
$('input.numberinput').bind('keypress', function (e) {
if((e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46) )
{
alert('Only Numbers');
return false;
}
else{
return true;
}
});
});
Link : http://jsfiddle.net/justmelat/EN8pT/

Hello again :) I can help you out with this as well:
$(document).ready(function () {
$('input.numberinput').bind('keypress', function (e) {
var allow = (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46) ? false : true;
if (!allow) {
alert('Only Numerical data allowed');
}
return allow;
});
});?
JSFiddle: http://jsfiddle.net/EN8pT/3/
Enjoy and good luck!