Why doesn't my function to check valid date work?

Question

So I made a script that checks on keyup of input field, if the date is valid. If it matches the regular expression, it should add class date-valid so that the borders turn green (added in stylesheet).

My code:

document.getElementById("date-check").addEventListener("keyup", dateValid);

function dateValid() {
 var dateinput = document.getElementById("date-check");

    // regular expression to match required date format
    re = /^\d{1,2}\-\d{1,2}\-\d{4}$/;

    if(!dateinput.value.match(re)) {
      dateinput.classList.add('valid-date');
    }
}

input[type="date"].valid-date {
border: 1px solid green; 
}

<input type="date" id="date-check" class="form-control calender-black" name="dbfield52">

The problem is, now it checks if it doesn't match the regular expression and then add the border. But it should add the border if it matches the reg. When I change it to if(dateinput.value.match(re)) it doesn't work.

With type="date" and a browser that supports it, the user cannot choose the format of the date, the browser does for him. — Álvaro González
– Álvaro González, Commented Jul 9, 2020 at 7:53
Why String.prototype.match()? Use RegExp.prototype.test() when you only need true/false — Andreas
– Andreas, Commented Jul 9, 2020 at 7:53

mplungjan · Accepted Answer · 2020-07-09 08:19:44Z

2

Because the value is not what you see

const re = /^\d{4}\-\d{2}\-\d{2}$/; // 2020-07-10 is what I get in Chrome for value
document.getElementById("date-check").addEventListener("change", dateValid);

function dateValid() {
  console.log(this.value, re.test(this.value));
  this.classList.toggle('valid-date', re.test(this.value));
}

.valid-date {
  border: 3px solid green;
}

<input type="date" id="date-check" class="form-control calender-black" name="dbfield52">

edited Jul 9, 2020 at 8:19

answered Jul 9, 2020 at 7:55

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sybrentjuh Over a year ago

Yes, I didn't think of this. Now it works perfectly, thanks!

Collectives™ on Stack Overflow

Why doesn't my function to check valid date work?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related