Javascript validation works in Google Chrome but not in Firefox - javascript

Here is the js code
function isCharKey(evt){
var charCode = event.keyCode
if ((charCode > 64 && charCode <91 )|| (charCode >96 && charCode<123) || (charCode==32))
return true;
return false;
}
Here is the html code
<label id="exe_form_name">Name:</label><input type="text" name="tbcust_name" id="name1" onkeypress="return isCharKey(event);">

Change
var charCode = event.keyCode
to
var charCode = evt.keyCode

function isCharKey(evt)
{
var charCode = evt.keyCode
if ((charCode > 64 && charCode <91 )|| (charCode >96 && charCode<123) || (charCode==32))
return true;
return false;
}

Related

Function for alpha and single space only

I have a function to make people enter alphabet only onkeypress
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
return true;
}
I have another function to prevent them from typing double spaces
function checkstuff(event){
if(event.target.value.substr(-1)=== ' ' && event.code === 'Space')
{
//alert('space clicked twice');
//remove space from the last.
event.target.value = event.target.value.substr(0,event.target.value.length-1);
}
debugger;
var evt = (event) ? event : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
console.log(charCode)
return false;
}
console.log('valid '+charCode)
return true;
}
I've been trying to put the two together into one function with no success. I tried running them both onkeypress, but it only runs the first. How can I merge the 2 functions?
After the part of alphabetical checking, you can add the function to check the double spaces as follows.
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
if(evt.target.value.substr(-1) === ' ' && evt.keyCode === 32) {
return false;
}
return true;
}
<input type="text" onkeypress="return isAlfa(event)" />
Use state for the previous input
const spaceCode = 32;
var lastCharCode = undefined;
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (lastCharCode == spaceCode && charCode == spaceCode) {
throw new Error('No double space allowed');
}
lastCharCode = charCode;
if (charCode > 32 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
return true;
}

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

Enter only digits in a textbox

I was using this function to enter only digits in to textbox and it worked.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
but customer asked me to restrict - sign so user should not enter - sign. So I modified the code to this:
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode == 45)
return false;
return true;
}
and now it not works, it allows letters too, why?
You need || in the group:
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
var bool = (charCode > 31) && (charCode < 48 || charCode > 57 || String.fromCharCode(charCode) == "-");
return !bool;
}
<input type="text" onkeypress='return isNumberKey(event)'>
You should use || instead of && in your test.
On my azerty keyboard, the - sign charcode is 54, not 45.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57 || charCode == 45) )
return false;
return true;
}
See this fiddle
Edit
Looks like your charCode is correct. The 54 value comes from my azerty keyboard.
Nevertheless, you should use || instead of && in your check.

How my JS function would restrict specific data ?

In asp.net textbox I have called a javascript function which I wrote to restrict only 'digits' entry in text box but I also want to allow '+' sign but can't solve it.
This is what I have tried so far.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
Just reverse your condition and add the ASCII code for + which is 43 to return true
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if ((charCode >=48 && charCode <= 57) || (charCode == 43))
return true;
return false;
}
If you were able to restrict digits, you can also enter '+', I guess you need ASCII table and corresponding value i.e. how you were restricting digits, and charCode > 31 seems useless if you are checking for digits only:
http://www.asciitable.com/
so if you want to check for +
charCode != 43
You need to check for + as well explicitly, modify your if to :
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 43)
Here is working example:
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 43) {
return false;
}
return true;
}
<input type="text" class="textfield" value="" id="extra7" name="extra7" onkeypress="return isNumber(event)" />
Working Demo
Ascii Table
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)&& charCode != 43) {
return false;
}
return true;
}

Javascript Function to enter only alphabets on keypress

I want to enter only character values inside a <textarea> and numeric values in another. I have been able to make a JavaScript function which only allows numeric values to be entered in the <textarea> using onkeypress. This works in Firefox and Chrome.
For alphabets I am creating another JavaScript function using windows.event property. Only problem is this works only in Chrome and not in Firefox.
I want to know how to allow only alphabets to be entered using onkeypress event as used for entering only numeric values?
function isNumberKey(evt){ <!--Function to accept only numeric values-->
//var e = evt || window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
function ValidateAlpha(evt)
{
var keyCode = (evt.which) ? evt.which : evt.keyCode
if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 123) && keyCode != 32)
return false;
return true;
}
<label for="cname" class="label">The Risk Cluster Name</label>
<textarea id="cname" rows="1px" cols="20px" style="resize:none" placeholder="Cluster Name" onKeyPress="return ValidateAlpha(event);"></textarea>
<br>
<label for="cnum">Risk Cluster Number:</label>
<textarea id="cmun" rows="1px" cols="12px" style="resize:none" placeholder="Cluster Number" onkeypress="return isNumberKey(event)"></textarea>
function lettersOnly()
{
var charCode = event.keyCode;
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || charCode == 8)
return true;
else
return false;
}
<input type="text" name="fname" value="" onkeypress="return lettersOnly(event)"/>
If you don't need to support older browsers I would use the input event. This way you can also catch non-alpha characters if the user pastes text into the textarea.
I cleaned up your HTML a little bit. The most important changes are to the events on cname and cnum. Note that the event in both cases has been changed to oninput.
<label for="cname" class="label"> The Risk Cluster Name</label>
<textarea id="cname" rows="1" cols="20" style="resize:none" placeholder="Cluster Name" oninput="validateAlpha();"></textarea>
<label for="cnum">Risk Cluster Number:</label>
<textarea id="cmun" rows="1" cols="12" style="resize:none" placeholder="Cluster Number" oninput="isNumberKey();"></textarea><br /><br /><br />
Assuming you want cname to only accept characters in the alphabet and cnum to only accept numbers, your JavaScript should be:
function validateAlpha(){
var textInput = document.getElementById("cname").value;
textInput = textInput.replace(/[^A-Za-z]/g, "");
document.getElementById("cname").value = textInput;
}
function isNumberKey(){
var textInput = document.getElementById("cmun").value;
textInput = textInput.replace(/[^0-9]/g, "");
document.getElementById("cmun").value = textInput;
}
This code uses regular expressions, a way to match patterns in strings.
Best Uses
<input type="text" name="checkno" id="checkno" class="form-control" value="" onkeypress="return isNumber(event)"/>
<input type="text" name="checkname" id="checkname" class="form-control" value="" onkeypress="return isAlfa(event)"/>
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function isAlfa(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
return false;
}
return true;
}
function digitonly(input,event){
var keyCode = event.which ? event.which : event.keyCode;
var lisShiftkeypressed = event.shiftKey;
if(lisShiftkeypressed && parseInt(keyCode) != 9){return false;}
if((parseInt(keyCode)>=48 && parseInt(keyCode)<=57) || keyCode==37/*LFT ARROW*/ || keyCode==39/*RGT ARROW*/ || keyCode==8/*BCKSPC*/ || keyCode==46/*DEL*/ || keyCode==9/*TAB*/ || keyCode==45/*minus sign*/ || keyCode==43/*plus sign*/){return true;}
BootstrapDialog.alert("Enter Digits Only");
input.focus();
return false;
}
function alphaonly(input,event){
var keyCode = event.which ? event.which : event.keyCode;
//Small Alphabets
if(parseInt(keyCode)>=97 && parseInt(keyCode)<=122){return true;}
//Caps Alphabets
if(parseInt(keyCode)>=65 && parseInt(keyCode)<=90){return true;}
if(parseInt(keyCode)==32 || parseInt(keyCode)==13 || parseInt(keyCode)==46 || keyCode==9/*TAB*/ || keyCode==8/*BCKSPC*/ || keyCode==37/*LFT ARROW*/ || keyCode==39/*RGT ARROW*/ ){return true;}
BootstrapDialog.alert("Only Alphabets are allowed")
input.focus();
return false;
}
hi try below code it worked for me in all browsers, it allows numbers and few special characters like,.+-() :
in the textbox use as follows
<asp:Textbox Id="txtPhone" runat="server" onKeyPress="return onlyNumbersandSpecialChar()"> </asp:Textbox>
function onlyNumbersandSpecialChar(evt) {
var e = window.event || evt;
var charCode = e.which || e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57 || charCode > 107 || charCode > 219 || charCode > 221) && charCode != 40 && charCode != 32 && charCode != 41 && (charCode < 43 || charCode > 46)) {
if (window.event) //IE
window.event.returnValue = false;
else //Firefox
e.preventDefault();
}
return true;
}
</script>

Categories