datetime-local「有効な値を入力してください」の解決法

スマートフォンでは、input タグの type 属性に datetime-local を指定していると、日付を入力しているのに「有効な値を入力してください」 と表示される場合があります。

この記事では

を紹介しています。  

表示されるタイミング

このメッセージは

input をタップ
↓
日付を選択しないでそのままデートピッカーを閉じる
↓
フォーム送信

で表示されます。

一度「有効な値を入力してください」と表示されると、画面をリフレッシュしない限り再度デートピッカーを表示できないので対策が必要になります。  

解決方法

解決方法は２つあります。

解決方法① 送信ボタンを押したらフォームを Submit する

「送信」ボタンが押されたら onclick 属性を使ってフォーム送信します。

<form>
  <input type="datetime-local" name="date">
  <input type="submit" value="送信" onclick="form.submit()">
</form>

解決方法② フォームのバリデーションを無効にする

form タグに novalidate 属性をつけて、バリデーションが実行されないようにします。

<form novalidate>
  <input type="datetime-local" name="date">
  <input type="submit" value="送信">
</form>

input 要素に required 属性をつけていた場合は、そちらも無効になってしまうので注意が必要です。

<form novalidate>
  <input type="text" name="name" required><!-- 入力チェックされないので注意 -->
  <input type="datetime-local" name="date">
  <input type="submit" value="送信">
</form>

Sara

運営者

XYouTubeContact

書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！