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

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

この記事では「メッセージが表示されるタイミング」と「２つの解決法」を紹介しています。
 
 

表示されるタイミング

このメッセージは

で表示されます。
 

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

解決法

解決法は

1. 送信ボタンを押したらフォームを Submit する
2. フォームのバリデーションを無効にする

がオススメです。
 

解決法① 送信ボタンを押したらフォームを 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>

ABOUT ME

Sara

「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂