CODEWITHSUNDEEP
javascripthtmljquerygoogle-chrome
Bàn Chân Trần
Bàn Chân Trần

Reputation: 1980

HTML input type date is sometimes empty value if entered incorrectly

There is a crazy thing happening with my input of type=date:

function getValue() {
  $('#entered').text($('input[name=test_date]').val());  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" min="2018-01-01" max="2018-05-05" name="test_date">
<button onclick="getValue()">Get value</button>
<p>Entered: <span id="entered"></span></p>

If I enter an invalid value, it will change to a valid value automatically, but not always a true date. The max date is always 31.

Ex:

And In the case of False, both jQuery or PHP cannot get the value. It always returns "".

I want to get value even if it's invalid. Do you have any suggestion?

Upvotes: 5

Views: 7467

Answers (2)

yrv16
yrv16

Reputation: 2275

From the HTML Living Standard documentation:

The value attribute, if specified and not empty, must have a value that is a valid date string.

The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.

Upvotes: 5

TylerH
TylerH

Reputation: 21092

Migrating OP's solution from the question to an answer:

According to https://bugs.chromium.org/p/chromium/issues/detail?id=231811, the reason is simplicity.

If you want to show error message when User enter invalid date. You can validate with input.validity.badInput or validationMessage: enter image description here

Upvotes: 3

Related Questions