I'm using this code for validating the phone number:
<script>
$("#Phone").keydown(function (e) {
// 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, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// 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();
}
});
var val = Phone.value
if (/^\d{11}$/.test(val)) {
// value is ok, use it
} else {
alert("Invalid number; must be eleven digits")
Phone.focus()
return false
}
</script>
I want the user to input only 11 digits and if it doesn't, it alerts user that they have to input 11 digits and sets the value to null.
The problem is, when it alerts that the number is less than 11 digits, it doesn't set the value to null.
I know you're asking for a JS solution but this can be done with the new attributes in html5
<input type="tel" pattern="[0-9]{11}" placeholder="Your 11 digit phone number..." required/>
Fiddle here: https://jsfiddle.net/7owhrssr/
This code can help you, cause may you have problem with regex
var regex =/^\d+$/;
if (regex.test(val)) {
alert('value is ok, use it');
}else{
alert('Invalid number; must be eleven digits');
Phone.focus()
return false}
Related
I wanted to do an input with that numbers but I do not arrive if I put the type of input to text I can put 5 character alpha numeric and if I put the type of input to number I can put only numbers but it is not limited to 5 numbers
Thank you all
HTML
<input type="text" id="number" name="postalCode" placeholder="Saisissez le code postal" formControlName="postalCode" maxlength="5" class="a-textbox" pattern="/^(([0-8][0-9])|(9[0-5]))[0-9]{3}$/" />
Angular
postalCode: new FormControl('', [Validators.maxLength(5)]),
You can try this solution
I have create a demo on stackblitz
html code
<input type="text" OnlyNumber id="number" name="postalCode" placeholder="Saisissez le code postal" formControlName="postalCode" maxlength="5" class="a-textbox" />
OnlyNumber attribute directive
import { Directive, ElementRef, HostListener } from '#angular/core';
#Directive({
selector: '[OnlyNumber]'
})
export class OnlyNumberDirective {
constructor(private el: ElementRef) { }
#HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
let e = <KeyboardEvent>event;
/*
8 - for backspace
9 - for tab
13 - for enter
27 - for escape
46 - for delete
*/
if ([8, 9, 13, 27, 46].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+C
(e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+V
(e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+X
(e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
// 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();
}
}
#HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
this.validateFields(event);
}
validateFields(event) {
setTimeout(() => {
let numberRegEx = /^[0-9]+$/;
if(!numberRegEx.test(this.el.nativeElement.value)){
this.el.nativeElement.value = "";
event.preventDefault();
}
}, 100)
}
}
This directive worked very well for me and has everything that you need to force it to 5 digits only and to exclude number related characters such as period, "e", etc.
I recommend to keep the input as type text, as well, see reasoning here.
Digit Only Directive in Angular
Angular DigitOnly Directive and Mask Directive
https://github.com/changhuixu/ngx-digit-only
I would like to create 3 input fields just like the ones on any Shopify checkout page.
Here are the functions for the input fields:
making spaces every 4 digits in the credit card number input field; number-only field; limiting it to 16 characters
creating a slash in after 2 digits for the expiration date field; limiting it to 8 characters; number-only field
This one would allows the user to do 2 things:
Write a number from 2-9, which automatically writes a slash afterwards.
It should look like this.
Write either 10, 11, or 12, which automatically writes a slash afterwards.
It should look like this.
See how it writes a slash automatically right after the second number? It only does that if you type in "/" or a second number for the month.
Here is what I'm playing with:
/*$('#number').on('keypress',function(){
var val = this.value;
var firstVal = val.slice(0,2);
var secondVal = val.slice(2,6);
var finalVal = firstVal+"/"+secondVal;
console.log(finalVal);
this.value = finalVal;
}); */
$('#number').on('keypress', function() {
if (this.value.length >= 2) {
this.value = this.value.slice(0, 2) + '/' + this.value.slice(3, this.value.length)
}
});
$(document).ready(function() {
$("#number").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl/cmd+A
(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl/cmd+C
(e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: Ctrl/cmd+X
(e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === 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();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<input type="text" id="number" maxlength="7" placeholder="MM/YY" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
But the problem I'm having here is that you can't even type a slash.
Thanks in advance,
Josiah
I have input field for imei number which should take only 15 digits that should only be numbers. Which I have done, my code below takes only 15 digits and leaves a space after 4 digits.
But the main problem I am facing here is if you hold any number it will take 18 digits. because when we type fast it is couting spaces also.
Here is fiddle link to try here
IMEI
$(".imei").on('keyup', function() {
var foo = $(this).val().split(" ").join("");
if (foo.length > 0) {
foo = foo.match(new RegExp('.{1,4}', 'g')).join(" ");
}
$(this).val(foo);
});
$(".imei").keydown(function (e) {
// 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: Ctrl+C
(e.keyCode == 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode == 88 && 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();
}
});
Change keyup to keypress:
$(".imei").on('keypress', function() {
keyup will only fire when you let go of the key, while keypress will fire every time the key is sent to the input.
Keep the keydown code as it's used to limit what's allowed.
Updated fiddle:http://jsfiddle.net/1zLwgf66/1/
The problem with keypress is that it occurs before the key has been sent to the input. You can get around this by adding the key to the input before running your code, or waiting until the default code has completed, by adding a simple setTimeout. With setTimeout, you'll have closure issues, so you need to copy this:
$(".imei").on('keypress', function() {
var inp = this;
setTimeout(function() {
var foo = $(inp).val().split(" ").join("");
Updated fiddle: http://jsfiddle.net/1zLwgf66/2/
I have an text box and applied Allow Alphabets With Space only using jquery. Its working in chrome But in firefox the backspace key is not working.
<input type="text" placeholder="" id="id1">
$(function(){
$('#id1').keypress(function (event) {
if ((event.which >= 65 && event.which < 91) || (event.which > 96 && event.which < 123) || event.which === 32 || event.which===0) {
return true;
}
else {
event.preventDefault();
}
})});
Here it is Plnkr
It is a difference in how the browsers handle the backspace character. In Chrome, backspace never makes it to the keypress event handler, but in Firefox it does.
If you add || event.which === 8 to your conditional, you'll allow backspace and return true, which will get it working in Firefox.
EDIT: Arrow Up, Down,Left, Right and Tab also doesn't work in firefox.
var ignoredKeys = [8, 9, 37, 38, 39, 40];
if (ignoredKeys.indexOf(event.which) >=0 || (event.which >= 65 && event.which < 91) || (event.which > 96 && event.which < 123) || event.which === 32 || event.which===0) {
return true;
} else {
event.preventDefault();
}
This should work in all [major] browsers:
$('#id1').keydown(function (event) {
if (event.which == 8) {
// ...
} else {
event.preventDefault();
}
);
Note the use of keydown instead of keypress, which is essential for it to work.
How do I restrict input fields to numeric values rather than integer values?
<input type="text" class="numericOnly">
jQ
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
Try this
$(".numericOnly").keypress(function(e) {
var code = e.which;
if(($(this).val().indexOf(".") == -1 && code == 46) || (code >= 48 && code <= 57) || (code == 51) || (code == 8) || (code >= 37 && code <= 40))
{
return true;
}
return false;
})
.bind("paste",function(e) {
e.preventDefault();
});
If you want to allow decimal points, add them to the character class you're using. E.g. /[^0-9.]/g if a decimal point in your locale is ., or /[^0-9,]/g if it's , (as it is in some).
Of course, that would let someone type .0.0.0.1, you'll want whole-value checks on the field as well as keystroke-level checks.
Separately, remember there are lots of ways for values to get into fields other than typing (pasting, for instance), so (again) whole-value checks at some stage will be a good idea.
Side note: Use e.which, not e.keyCode. jQuery normalizes the event object, setting e.which on browsers that don't set it natively.
With Dot
Get this js file
http://thefitties.co.uk/js/plugins/jquery-numeric.js
And
In HTML
<input class="numeric" type="text">
in Script
$("input.numeric").numeric()
WITHOUT DOt
$(document).ready(function() {
$("#txtboxToFilter").keydown(function (e) {
// 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();
}
});
});
OR
http://jsfiddle.net/lesson8/HkEuf/1/