0

I am trying to "check" to see if an field for MM/YY includes a "/" at the 3rd character, and if not, then using Javascript to add it before the form is submitted. For example, if a user inputs "0120", I'd like this function to submit the form as if the user wrote "01/20".

If the user already inputs "01/20", I'd like it to do nothing. What is the simplest way to do this? My attempt below does not work.

 <input id="month-year">



 var monthYear = document.getElementById('month-year').value;

        if(monthYear.includes("/")) {
              //do nothing
            } else {
              monthYear = monthYear.insert(2,"/");
        }

I know there are other questions here about how to validate whether the input pattern includes the "/" or not, but I'm less concerned about validating a pattern just to tell the user "try again" and more concerned with just auto-correcting it on our end so the user doesn't have to (which I can't find).

  • Why is it not working? Did you check if `monthYear` is actually a value? – CodeDraken Sep 12 '18 at 16:30
  • yeah monthYear is a value as I already call it in another function to check if the field is blank (i.e. if(monthYear =""){console.log("Please enter monthYear");}. Tbh, not sure why it's not working – brianmfoley Sep 12 '18 at 16:59

3 Answers3

0

You may use .indexOf methods to do that which return -1 if pattern is not present.

const offset = monthYear.indexOf("/");
if (offset === 2) {
  // match with "01/20"
} else {
  // it's maybe an other data e.g. "foobar"
}

But you should check deeper with a regexp:

const match = /(\d\d)\/?(\d\d)?(\d\d)/.exec(monthYear);
if (match) {
  monthYear = match[1] + '/' + match[3];
} else {
  // bad month-year format
}
np42
  • 847
  • 7
  • 13
0

If you're in IE then .includes won't work. Otherwise, the code you posted is fine, there's a bug somewhere else.

You could also just use the index of where the / should be. Or a RegExp.

const bad = '0118'
const good = '01/18'
const re = /\d\d\/\d\d/

console.log( bad.includes('/'), good.includes('/') ) // false true

console.log( bad[2] === '/', good[2] === '/' ) // false true

console.log( re.test(bad), re.test(good) ) // false true
CodeDraken
  • 1,163
  • 6
  • 12
0

After you've correctly determined that your date string lacks a '/', what you are looking for is array splice.

how to insert an item into an array at a specific index

Use arrMonthYear = monthYear.split(''); to turn your string into an array. You can then use splice to insert at an index. and use join to turn it back into a string.

if(monthYear.includes("/")) {
              //do nothing
            } else {
              arrMonthYear = monthYear.split('');
              //[M, M, Y, Y]
              arrMonthYear.splice(2, 0, "/");
              // [M, M, '/', Y, Y]
              strMonthYear = arrMonthYear.join(''))
              // new string with format MM/YY
        }

You could also just manipulate the string as a string, but most of those methods aren't as straightforward: string manipulation, and involve treating the string as an array anyways.