Javascript functiion not working as expected - javascript

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

Related

Validation and Backspace Conflict Firefox

I have an input field that has a validation. The validation works great in all browsers. However in Firefox there seems to be an issue. If an user presses backspace or arrow or home keys in that input field it simply does not work.
THE HTML:
<input onkeydown="return isName(event)" class="form-control firstnameweb_text" placeholder="First Name" id="firstname_text" name="firstname_text" onblur="isEmptyfname(this)" required="" type="text">
THE JS:
function isName(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) || (charCode > 7 && charCode < 10) || (charCode == 46) || (charCode > 38 && charCode < 39) || (charCode == 32) || (charCode == 190))
return true;
else
return false;
} catch (err) {
alert(err.Description);
}};

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 Validation for Decimal Number

I Have One text box Which should accept decimal like 12345.678 That text box should accept . before 5 decimals and after 3 decimals how to validate for this type
You can use regular expressions to match values from textarea. Required regex would be:
/^\d{5}\.{1}\d{3}$/
http://www.regexr.com/3a8rn
Is this what you are looking for?
Fiddle: Demo
HTML
<input type="text" onkeypress = "return onlyDecimal(event,this)" onblur="validateValue(this)"/>
JS
function onlyDecimal(event, elem) {
var charCode = (event.which) ? event.which : event.keyCode;
console.log(elem.value.indexOf("."));
if(elem.value.length>=9)
{
validateValue(elem);
return false;
}
if (elem.value.indexOf(".") >= 0 && elem.value.split(".").length - 1 >= 0 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
if ((charCode == 190 || charCode == 110 || charCode == 46) && elem.value.length>=5) //for '.'
return true;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
}
function validateValue(elem){
if(elem.value.length<=9 && elem.value.indexOf(".") < 0)
{
alert("invalid value");
}
else if(elem.value.length<=9 && elem.value.indexOf(".") !=5)
{
alert("invalid value");
}
else if(elem.value.length>0 && elem.value.indexOf(".") >0)
{
var temp=elem.value.split(".");
if(temp[0].length<5 ||temp[1].length<3)
alert("invalid value");
}
}

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

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