How my JS function would restrict specific data ? - javascript

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

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

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.

Javascript currency regular expression replace

For my business web application I want a user to only be able to enter valid currency values in a textbox.
Currently I use
$input.val($input.val().replace(/[^.\d]/g, ''));
But this doesn't take in consideration order or multiple decimal seperators.
So the user either has to enter a whole integer or a valid decimal value e.g.:
49
49.50
Bonus points if this is allowed too:
.50 (for 0.50)
So I don't want to validate, I want to restrict typing into the textbox. Is this possible with a single regexp replace?
We can do this in two steps. Restrict the user to type only the number characters and . character.
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode < 31 && (charCode > 48 || charCode < 57))
return true;
return false;
And the next one is for allowing the .:
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode == 46 && (charCode > 31 && (charCode < 48 || charCode > 57)))
return true;
return false;
The next step will be not allowing double periods.
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode == 46 && (charCode > 31 && (charCode < 48 || charCode > 57)))
if (charCode == 46 && value.indexOf(".") !== false)
return true;
return false;
Hope you can have this as a starting point.
Snippet
Open Deal: Break it if you can.
function check(inp) {
var charCode = (event.which) ? event.which : event.keyCode;
console.log(charCode);
if (charCode == 8)
return true;
if ((charCode > 46 && charCode < 58) || (charCode > 95 && charCode < 106) || charCode == 110 || charCode == 190)
if (charCode == 110 || charCode == 190)
if (inp.value.indexOf(".") == -1)
return true;
else
return false;
else
return true;
return false;
}
<input type="text" onkeydown="return check(this);" />
It's more user friendly to advise of errors and let users fix them themselves. You might consider using the keyup event, but showing an error too early (before the user has had a chance to enter a valid value) can be annoying too. e.g.
function validate(el) {
var type = el.className;
var errEl = document.getElementById(el.name + 'Err');
if (type == 'typeCurrency') {
var currencyRe = /^-?(\d+(\.\d{1,2})?|\.\d{1,2})$/;
errEl.style.visibility = currencyRe.test(el.value)? 'hidden' : 'visible';
}
}
.errorMessage {
color: red;
background-color: white;
visibility: hidden;
}
Cost <input onblur="validate(this)" name="foo" class="typeCurrency" placeholder="0.00"><br>
<span id="fooErr" class="errorMessage">Please enter a valid cost, e.g. 2.45</span>

Javascript validation works in Google Chrome but not in Firefox

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

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