HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input Datetime の required プロパティの使い方を解説

HTML DOM の Input Datetime における required プロパティは、日時（datetime）フィールドへの入力がフォーム送信時に必須かどうかを取得・設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的に必須項目の切り替えや状態の確認を行うことができます。

構文

required プロパティの基本構文は以下のとおりです。

値の取得（真偽値 true / false を返す）

inputDatetimeObject.required

値の設定（booleanValue を代入する）

inputDatetimeObject.required = booleanValue

booleanValue に指定できる値

booleanValue には、次のいずれかの真偽値を指定します。

booleanValue説明
true日時フィールドへの入力が必須になります。未入力のままではフォームを送信できません。
falseデフォルト値です。日時フィールドへの入力は必須ではありません。

サンプルコード

Input Datetime の required プロパティを使用した具体例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime required</title>
</head>
<body>
<form>
Final Exam Datetime: <input type="datetime" id="datetimeSelect" value="" required>
</form>
<button onclick="finalizeDatetime()">Confirm Datetime</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDatetime = document.getElementById("datetimeSelect");
   divDisplay.textContent = 'Exam Datetime Required: '+inputDatetime.required;
   function finalizeDatetime() {
      if(inputDatetime.value === '')
         divDisplay.textContent += ', Give a valid Exam Datetime. ';
      else
         divDisplay.textContent = 'Final Exam Datetime: '+inputDatetime.value
   }  
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。

ページ読み込み直後の表示：

HTML DOM Input Datetime の required プロパティの使い方を解説

日時フィールドに値を設定した状態で「Confirm Datetime」ボタンをクリックした場合：

HTML DOM Input Datetime の required プロパティの使い方を解説

補足：type="datetime" の注意点

なお、<input type="datetime"> は現在ほとんどのブラウザでサポートが廃止されています。実務で日時入力欄を作成する場合は、代わりに広く対応されている <input type="datetime-local"> を使用することを推奨します。required プロパティの考え方や使い方はどちらの型でも同様です。

  1. HTML DOM入力テキスト（Input Text）のrequiredプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput Text requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、特定のテキストフィールドへの入力が必須かどうかを設定したり、現在の状態を取得したりすることができます。required属性が設定されたテキストフィールドが空のままの場合、ユーザーがフォームを送信しようとしても、フォームは送信されずブラウザ側で入力を促す警告が表示されます。これにより、JavaScriptによる複雑なバリデーション処理を書かなくても、簡単に入力チェックを実装できます。

  2. HTML DOM入力パスワードのrequiredプロパティとは？使い方をサンプルコード付きで解説

    HTML DOMのInput Password requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、パスワード欄の入力が必須かどうかを設定したり、現在の設定状態を取得したりすることができます。required属性が設定されたパスワード欄が空のままの場合、ユーザーはフォームを送信できなくなります。 構文（Syntax） requiredプロパティの基本的な構文は以下の通りです。 requiredプロパティの設定 textObject.required = true|fals