Develop Reference

Date validation - Go to next input field once number of characters entered

This is someone else's code and I am quite new to JS so finding it quite difficult to understand.
I'm trying to auto tab to the next input once the maximum limit has been reached.
The problem I'm having is that the input for year is tabbing before the full year has been fully entered.
If someone could point me to the right direction that would be of great help.
JS Bin:
https://jsbin.com/wazarezufi/edit?js,output
"use strict";
var parts = el.find('input');
function constructor(el) {
console.log('running');
$('input').on('keyup', _.bind(onKeyup, this))
.on('keypress', _.bind(onKeypress, this))
.on('focus', focus)
.on('paste', _.bind(paste, this));
}
function paste(evt) {
// allows pasting of dates in
var str = evt.originalEvent.clipboardData.getData('text/plain'),
bits;
if (str && (bits = /(\d\d)[\/\\.-]?(\d\d)[\/\\.-]?(\d\d\d\d)/.exec(str))) {
parts.each(function (idx) {
$(this).val(bits[idx + 1]);
})
return false;
}
}
function onKeypressDef(e) {
var el = e.target;
var val;
// find the target in our list
for (var idx = 0; idx < parts.length; idx++) {
if (parts[idx] === el) break;
}
if ((val = $(el).val()).length == 2) {
if (idx < parts.length - 1) {
parts[idx + 1].select();
}
}
}
function focus() {
$(this.select());
};
function onKeyup(e) { // needed to trap the backspace
console.log('keyup');
if (e.which === 8) {
onKeypress.call(this, e);
}
}
function onKeypress(e) {
var self = this;
var evt = e;
if ((evt.which > 32) && (/\D/.test(String.fromCharCode(evt.which)))) return false; // only let numeric chars through
_.defer(function () {
onKeypressDef.call(self, evt);
});
}
constructor();
Thanks

You could have a data attribute where you could specify the length of the input, like so:
<input placeholder="YYYY" data-length="4">
Then update you javascript to check for this attribute and if not found, then use 2 as the default.
if ((val = $_el.val()).length == ($_el.data('length') || 2)) {}

The problem is doing this for any input:
if ((val = $(el).val()).length == 2)
You should check (by id, for example) which input triggered the event and compare the length to 2 or 4 depending in the case.

Have updated the fiddle -- https://jsbin.com/vojojufabe/edit?js,output
The issue was that the length was being checked when the data is entered and when lenght is 2 it jumps to next input, have added isyear data attribute, and checked it for lenght to be of 4 characters
if (!isYear && val=== 2) {
if (idx < parts.length - 1) {
parts[idx + 1].select();
}
}
if (isYear && val=== 4) {
if (idx < parts.length - 1) {
parts[idx + 1].select();
}
}

You can achieve this by adjusting your input length check with something as follows:
var l = 2
if (el.id === 'input__date-year-arriveInUk') {
l = 4
}
if ((val = $(el).val()).length == l) {...
You can check whether the id of the current input is the one of your date input and focus the next input after a String of length 4 is entered.

auto slash in date field to remain permanent using javascript

I can add auto slash to the date field.But when I hit backspace, I need the backslash to remain where it is.
var keycode = event.which,
value = $(current).val(),
position1 = 3,
position2 = 6;
if((value.length === (position1 - 1)) ||
(value.length === (position2 - 1))){
if (keycode === 8) {
value = value + '/';
}
}

You can try jsfiddle from this answer
var format = "mm/dd/yyyy";
var match = new RegExp(format
.replace(/(\w+)\W(\w+)\W(\w+)/, "^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*")
.replace(/m|d|y/g, "\\d"));
var replace = "$1/$2/$3$4"
.replace(/\//g, format.match(/\W/));
function doFormat(target)
{
target.value = target.value
.replace(/(^|\W)(?=\d\W)/g, "$10") // padding
.replace(match, replace) // fields
.replace(/(\W)+/g, "$1"); // remove repeats
}
$("input[name='birthdate']:first").keyup(function(e) {
if(!e.ctrlKey && !e.metaKey && (e.keyCode == 32 || e.keyCode > 46))
doFormat(e.target)
});
Update
Try this one fiddle that uses HTML5

Best way to check if a character is a number of letter in javascript?

In javascript whats the best way to check if a character (length 1), is a number (i.e. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9) or a letter (i.e. A to Z, a to z)?
Thanks

Why not:
function isNumber(i) {
return (i >= '0' && i <= '9');
}
function isLetter(i) {
return ((i >= 'a' && i <= 'z') || (i >= 'A' && i <= 'Z'));
}

I wrote a little test case for you, at least for the numeric checking function.
Considering the fact that all functions returns true with either a numberic 1 or a string '1' literal, using an Array seems to be the fastest way (at least in Chrome).
var isNumericChar = (function () {
var arr = Array.apply(null, Array(10)).map(function () { return true; });
return function (char) { return !!arr[char]; };
})();
However, if you accept that it might return false for 1, the switch statement is then significantly faster.

Try this.
function validate_string() {
var str = "a"; //change to desired value;
var regX = new RegExp("([0-9A-Za-z])");
var ans = false;
if(str.length == 1) {
ans = regX.test(str);
}
return ans;
}
Edit: Refactored my answer.
function validateString(char) {
let regx = new RegExp(/^[0-9A-Za-z]{1}$/g);
return regx.test(char);
}
validateString('4'); // true
validateString('as'); // false
validateString(''); // false
validateString(); // false

Maybe try something like this
var sum = 0; //some value
let num = parseInt(val); //or just Number.parseInt
if(!isNaN(num)) {
sum += num;
}
This blogpost sheds some more light on this check if a string is numeric in Javascript | Typescript & ES6

You can check for the type of the variable
function checkType(input){
console.log(typeof input)
}
checkType(1234); //number
checkType('Hello') //string
Here is an updated version
function checkType(i){
var input = i.toString(); //convert everything to strings to run .lenght() on it
for(var i=0; i<input.length; ++i){
if(input[i] >= '0' && input[i] <= '9'){
console.log(input[i]+' is a number');
}else if((input[i] >= 'a' && input[i] <= 'z') || (input[i] >= 'A' && input[i] <= 'Z')){
console.log(input[i]+' is a letter');
}
}
}
checkType('aa9fgg5')

Javascript - handling keypresses in order?

I have a simple "onKeyUp" Javascript routine that is supposed to handle adding dashes to an input field to format a phone number, turning "1234567890" into "123-456-7890". However, if the user types too fast the routine apparently doesn't fire, or the event gets lost, I'm not sure. But in that case, the dashes don't get inserted.
Can anyone suggest a fix for this? Here's the routine:
function(event, field) {
// Don't add dashes if user pressed backspace
if (event.keyCode != 8 ) {
if (field.value.length == 3 || field.value.length == 7) {
field.value = field.value + "-";
}
}
};

SOLUTION
var dashes = function(event, field) {
if (event.keyCode != 8 ) {
var arr = field.value.split(''),
l = arr.length;
if(l > 2 && arr[3] != "-") arr.splice(3, 0, "-");
if(l > 6 && arr[7] != "-") arr.splice(7, 0, "-");
field.value = arr.join('');
}
};
var input = document.getElementById('in');
input.addEventListener('keyup',function(event){
dashes(event, input);
});

convert alphabets to coresponding numbers

i have to convert alphabets to corresponding numbers like i have a data like "DRSG004556722000TU77" and the index for A is 10, B is 11, C is 12 and so on up to Z is 35.
any helping tips??
here is the javascript which return me ascii code but i want to get the above indecies for respective alphabet
var string = DRSG004556722000TU77;
function getColumnName(string) {
return ((string.length - 1) * 26) + (string.charCodeAt(string.length - 1) - 64);
}
document.write( getColumnName(string) );

This may help
var output = [], code, str = 'DRSG004556722000TU77',i;
for(i in str){
code = str.charCodeAt(i);
if(code <= 90 && code >= 65){
// Add conditions " && code <= 122 && code >= 97" to catch lower case letters
output.push([i,code]);
}
}
Now ouput contains all letters codes and their corresponding indexes

var string = 'DRSG004556722000TU77';
function getColumnName(string) {
var recode = new Array(), i, n = string.length;
for(i = 0; i < n; i++) {
recode.push(filter(string.charCodeAt(i)));
}
return recode;
}
function filter(symbol) {
if ((symbol >= 65) && (symbol <= 90)) {
return symbol - 55;
} else if ((symbol >= 48) && (symbol <= 57)) {
return symbol - 48;
}
}
document.write(getColumnName(string));