How can I automatically add a - after the 5 digits of a US zip code (using AngularJS) if more than 5 digits are typed into the field and save it as a 9 digit string (like 12345-6789) to validate it?
index.html
<div class="field">
Country: {{location.zipcode}}
</div>
index.controller.js
...
$scope.validateZipCode = function(location.zipcode) {
return (zipcode.length === 5 || (zipcode.length === 10 && zipcode[5] === '-'));
}
...
The user are not adding the - on their own and I feel like having an automatically populated - would be good UX.
Please don't recommend the use of any libraries or zipcode validation APIs. This is a legacy project that needs minimal additions.
There's not going to be an out of the box way of doing this, so you'll have to create a function to count the characters and insert your hyphen when needed.
here is a basic example of how you can go about it.
const input = document.getElementById('zip');
document.addEventListener('keyup', e => {
const val = e.target.value;
if (val.length < 6) { input.value = e.target.value; }
if (val.length > 5) {
// There are better ways to do this part, but here's the basic idea
input.value = input.value.replace('-', '');
input.value = input.value.substring(0, 5) + '-' + input.value.substring(5, input.value.length);
}
});
<input id="zip" />
One thing to note is that you can use an out of the box way to validate your input requirements by using the pattern attribute
Related
I wanna auto add slash in credit card expiry date field input. I wanna add slash after type 2 character and remove slash after delete third digit. Example, 23/ (auto add slash after type number 3) 23/4 (auto remove slash after delete number 4)
addSlashes(elementID) {
let ele = document.getElementById(elementID)
const value = ele.value
let finalVal = null
if (value.length === 2) {
finalVal = `${value}/`
}
document.getElementById(elementID).value = finalVal
},
As soon as the / is added after 2 characters, the total length becomes 3. So, it is not very clear how the operation should happen.
However, if this is for some automatic changes to happen when progressive typing takes place, here is the code to add a / automatically when the user has typed 2 characters and remove it when the next character is added after the /
Edit
OP needs to delete the / when the 3rd digit is removed.
function modifyInput(ele) {
if (ele.value.length === 2)
ele.value = ele.value + '/'
else
if (ele.value.length === 3 && ele.value.charAt(2) === '/')
ele.value = ele.value.replace('/', '');
}
<input type="text" onkeyup="modifyInput(this)">
I have an input field of length 14 into which the user types a value. As the user types into it, I would like a space to be added automatically after first 2 characters and then after next 3 characters and then after next 3 characters. so if the user wants to enter 12345678901, it should be formatted to 12 345 678 901.
Also when user uses backspace to clear the characters, the space should automatically be removed. So in the above case when the cursor reaches 9 and user hits backspace, the cursor should move two places to left clearing 9 and the space before it.
I tried following the credit card formatting here Format credit card number but couldn't understnd how it is done. The code from above link is
formatInput(event: any) {
var v = event.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
var matches = v.match(/\d{4,16}/g);
var match = matches && matches[0] || ''
var parts = []
for (let i=0, len=match.length; i<len; i+=4) {
parts.push(match.substring(i, i+4))
}
if (parts.length) {
(<HTMLInputElement>document.getElementById("txtInput")).value =
parts.join(' ')
} else {
(<HTMLInputElement>document.getElementById("txtInput")).value
= event.value;
}
}
The above code generates spaces after every 4 digits. My requirement is to accept any characters and generate spaces after first 2 characters and then after next 3 characters and then after next 3 characters. Please help me out with this.
this is a working example that solves your problem.
function format(str) {
if (str.length < 2) return str
else {
let [fl,sl,...lstr] = str
lstr =lstr.reduce((acc, el, i) => (i % 3 ? acc[acc.length - 1]+=el : acc.push(el), acc),[])
return `${fl}${sl} ${lstr.join(' ')}`.trim()
}
}
const [input,result]= document.querySelectorAll('#input,#result')
input.oninput =()=>{
const i = input.value.replace(/\s/g, '');
input.value= format(i)
}
<input type=text id=input />
<p id="result"></p>
Alright, after digging through several sites...I am sure there is a better way to get the result I am looking for. Users are entering data in a text box on an HTML form and I want the format to change from 152000 (HHMMSS) to 15:20:00 (HH:MM:SS)
I was able to Frankenstein the jQuery below and it does work but I'm sure there is a better way to achieve the same result. I know I could handle the data after submission but would prefer to use jQuery to update it as they type. From what I read, I could use some type of time format but everything was focused on time as a date and I just need this to be a string that adds a colon after every two digits and limits the length to 8. Any thoughts?
$('#amount').keypress(function() {
// limits the charachters allowed
var regex = new RegExp("^[0-9:]");
var key = String.fromCharCode(event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
//adds a colon after 2 digits typed
if(this.value.length == 2){
this.value = this.value+':';
}
//adds a colon after 5 character
if(this.value.length == 5){
this.value = this.value+':';
}
//limit to 8 total characters
if(this.value.length > 7) {
return false;
}
});
$('#amount').keypress(function() {
let $input = $(this);
let value = $input.val();
let update = value.replace(/(\d{2})(\d{2})(\d{2})/, '$1:$2:$3');
// 120000 --> 12:00:00
$input.val(update)
})
We have pin numbers in the following format:
45 674 25 910
Our original requirement was to give the users the ability to enter their pin with or without spaces,
In other words, if the pin is 10 digits without spaces, we would like to accept it as valid input.
Similarly, if the pin is 13 digits (with the three spaces) we would also like to accept the input as valid.
If the digits are less than 10 with or without spaces, or more than 13 with spaces, we would like to throw an error that input is invalid.
The script below satisfied the above requirements:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSearch").click(function () {
var result = true;
if ($('#pin').val().replace(/ /g, '').length == 10) {
result = true;
}
else {
result = false;
alert("Invalid");
return false;
}
return result;
});
});
</script>
However, management has decided to change the requirement to ask that spaces be automatically added while the user is entering the pin numbers.
In other words, users can enter the pin numbers with spaces or they can enter the pin numbers without spaces but that spaces be automatically added while they are typing the pin numbers.
Any ideas how to modify the script above?
Better yet, is there an example that I can modify to meet our requirements?
Using String.prototype.replace()
Note: this code will add space after 2, 3, 2, 3 ..etc chars. you can change the number of chars by edit the code inside map
$("#user-input").on('keyup', function () {
// Helpers
var swap = 4, // Swap between 3 and 4
index = 2; // Spaces indexs 2, 6, 9, 13 .. etc
// This variable contains the same input value with sapces
var niceVal = $(this).val()
.replace("/\s/g", "").split("") // Remove all spaces and convert to array
.map(function (item, i) { // loop throw the array
if (i === 0) {
return item;
}
if (i % index === 0) {
item = item === " "
? item
: " " + item;
index += swap;
swap = swap === 3
? 4
: 3;
}
return item;
}).join(""); // Convert array to string
$(this).val(niceVal); // Update input value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="user-input">
Well with pure JS my approach to the problem could be as follows;
Though i mentioned the keyup event in my comment, it seems the keydown event turns out to be more appropriate since keyup might result a strange behavior when multiple keys are pressed at the same time due to speed typing. I haven't tested this thoroughly so it's just a guidance for you. However, if you discover any buggers i can possibly have a look into it.
Edit: Despite all my efforts I have come to the awareness of the fact that if you want to modify the value of an input element, like in this question, you must set up a logic to utilize both keydown and keyup events in a harmony. This will simplify your logic enormously and would yield a much sturdy code.
OK lets go...
var pin = document.getElementById("PIN"),
pbt = document.getElementById("PBT");
pin.addEventListener("keydown", function(e){
var val = e.target.value,
len = val.length,
lst = val[len-1],
key = e.key;
e.target.value = key === "Backspace" ? len === 4 ||
len === 8 ||
len === 11 ? val.slice(0,-1)
: val
: len === 2 ||
len === 6 ||
len === 9 ? val + "\xa0"
: val;
});
pin.addEventListener("keyup", function(e){
var val = e.target.value,
pix = val.search(/[^0-9\xa0]/); // problem index
e.target.value = ~pix ? val.slice(0, pix) : val
});
pbt.addEventListener("click", function(e){
pin.value.length === 13 ? console.log(pin.value)
: console.log("Please complete the PIN Code");
});
<input id="PIN" value="" placeholder="Enter PIN" maxlength=13 size=13/>
<button id="PBT">Enter PIN</button>
I am trying to format credit cards as users type them into the field. I've read every topic on the subject here on stack overflow, looked at tons of sites, lots of libraries and the code behind them. I want to create a simple function that will format credit cards as the user types them into the field using VANILLA JAVASCRIPT. Some of the following code comes from topics found here on Stack Overflow but none of the threads have solved the particular problem of doing this as the user is typing into the field.
PROBLEM: By default as the user is typing the into the given credit card field it changes the value by putting spaces in between the numbers, it will not validate as an American Express card until all the digits have been entered and thus not adjust the format until it is complete. I've tried casting the value without spaces and retesting it every cycle but to no avail.
function cc_format(v) {
//Strip the field value of spaces.
amextest = v.replace(/\s/g, '');
//Test if the card is an american express each cycle
if(/3[47]\d{2}[ -]*\d{6}[ -]*\d{5}/.test(amextest))
{
//This is some borrowed code to format american express cards - http://stackoverflow.com/questions/27322733/javascript-regex-format-string-containing-american-express-card-number
v.replace(/\b(\d{4})(\d{6})(\d{5})\b/, '$1-$2-$3');
return v;
}
else
{
//This properly formats every other card type as its being typed.
var v = v.replace(/[^\d]/g, '').match(/.{1,4}/g);
return v ? v.join(' ') : '';
}
}
//This binds the function to an input
document.getElementById('credit_card').oninput = function() {
this.value = cc_format(this.value)
}
I call upon the gods of stack overflow, please help me put this rest once and for all!
EDIT: Forgot the OP wanted plain JS. I'll leave this here for posterity, but it is obviously not an answer.
You could try this - match on the first two digits, and then automatically update the input after the 4th digit (and prevent an input greater than 17 characters (15 digits and 2 dashes):
$('#cc').on('keyup', function() {
var amexTest = $(this).val().replace(/ /g, '');
if (amexTest.match(/^3[47]\d{2}/)) {
if (amexTest.length == 4) {
amexTest += '-';
$('#cc').val(amexTest);
}
if (amexTest.length == 11) {
amexTest += '-';
$('#cc').val(amexTest);
}
if (amexTest.length > 17) {
val = $(this).val().substr(0, $(this).val().length - 1);
$(this).val(val);
}
} else {
if (amexTest.length > 16) {
val = $(this).val().substr(0, $(this).val().length - 1);
$(this).val(val);
}
if (amexTest.length == 16) {
var splits = amexTest.match(/\d{4}/g);
val = splits.join(' ');
$(this).val(val);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="cc">