Q&A
HTMLで日時入力にdatetime-localを利用しているのですが、入力の上限と下限が設定できません。
カレンダーからの選択では制限されているのですが、直接入力すると入力できてしまいます。
直接入力時は送信時に個別でエラー対応するしかないのでしょうか？
HTML
1<html lang="ja"> 2<script type="text/javascript"> 3function fnTest() { 4 document.F1.submit(); 5 submitbtn.click(); 6} 7</script> 8 9<form name="F1" class="testForm" id="TestForm" action="./test2.php" method="post"> 10 <div id="DateTime"> 11 <label id="DateTimeLabel" for="SetDay">日時</label><br> 12 <input type="datetime-local" name="setDay" id="SetDay" min="2017-06-01T08:30" max="2100-06-01T08:30" required> 13 </div><br> 14</form> 15 16<input class="sendBtn" id="SendBtn" type="button" value="送信" onclick="fnTest()"> 17</html>
上記のコードの場合、カレンダーからであれば2017年以前と2100年以降は選択できないのですが、
例えば入力で全部1を入力すると1111年11月11日11時11分が入力できて送信できてしまいます。
回答1件
0
ベストアンサー
Google Chrome の実装は、そういうものです。
入力の制限はされませんが、:invalid セレクタや input.validity.valid などには反映されますし、フォームを送信しようとするとエラーが表示されます。
inputイベントやchangeイベントを監視して範囲外の値だったら範囲内にセットし直すという手もあります。
投稿2022/06/14 08:08
編集2022/06/14 23:35
総合スコア20856
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/14 23:25
2022/06/14 23:34
2022/06/14 23:42
2022/06/14 23:47
2022/06/14 23:56