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>

Javascript functiion not working as expected

Currently I'm trying create a script that will only allow A-Za-z, 0-9, white space and comma. Here is my script:
<textarea name="commentText" onkeypress="return filterCharAll(event,this);"></textarea>
 
function filterCharAll(e, t) {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if ((charCode > 47 && charCode < 58) || (charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 188 || charCode == 32 || charCode == 13)) {
return true;
} else {
return false;
}
}
Everything is working perfectly! But the comma is not working. When I press it, nothing happens
JSfiddle: https://jsfiddle.net/mek7qy8h/
Can you help me? Thank you.

You need to check the charCode of 44 to match the comma:
function filterCharAll(e, t) {
if (window.event) {
var charCode = window.event.keyCode;
} else if (e) {
var charCode = e.which;
} else {
return true;
}
if (charCode === 44 || (charCode > 47 && charCode < 58) || (charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 188 || charCode == 32 || charCode == 13)) {
return true;
} else {
return false;
}
}
<textarea name="commentText" onkeypress="return filterCharAll(event,this);"></textarea>
But it might be easier to use a regular expression and test e.key:
function filterCharAll(e) {
return /[a-z0-9\s,]/i.test(e.key);
// return true if the key is alphabetical (lower or upper),
// or digits, or whitespace, or a comma
// return false otherwise
}
<textarea name="commentText" onkeypress="return filterCharAll(event);" onpaste="return false;"></textarea>
Another option that doesn't break pasting would be to use an input listener instead, and replace all disallowed characters with the empty string:
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
textarea.value = textarea.value.replace(/[^a-z0-9\s,]/gi, '');
});
<textarea></textarea>

You should not be using charCode since it is deprecated, instead you can use char and test that against a regular expression.
function filterAll(event) {
return /[A-Za-z0-9, ]/.test(event.char);
}

HTML Textfield validation Backspace issue

I am validating the text field which should accept only characters it should not allow to enter numbers it is working good but when entering unwanted text the backspace is not working. I want to work it please give me advice.
This is my code:
function Validate_Classname() {
var str = document.cclass.classname.value;
if (IsBlank(str)) {
alert("Class Name field cannot be empty")
return false;
}
if (!isNaN(str)) {
alert("Please enter only text")
return false;
}
return true;
}
function onlyAlphabets(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else {
return true;
}
if ((charCode > 64 && charCode < 91)
|| (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}

Backspace has a keyCode of 8. Just return true when charCode == 8.
Your code should now be
if ((charCode > 64 && charCode < 91)
|| (charCode > 96 && charCode < 123) || (charCode == 8))
return true;
else
return false;
}
instead of
if ((charCode > 64 && charCode < 91)
|| (charCode > 96 && charCode < 123))
return true;
else
return false;
}

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

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)"/>