HTML DOM Input Date の required プロパティとは？構文と使い方を解説
HTML DOM の Input Date required プロパティは、フォーム送信時に日付入力フィールド（<input type="date">）への入力が必須かどうかを取得・設定するためのプロパティです。この値を true にすることで、ユーザーが日付を選択しない限りフォームを送信できないようにできます。
構文
required プロパティの基本的な構文は以下の通りです。
値の取得（boolean 値を返す）
inputDateObject.required
値の設定（boolean 値を代入する）
inputDateObject.required = booleanValue
booleanValue に指定できる値
「booleanValue」には以下のいずれかの真偽値を指定します。
| booleanValue | 説明 |
|---|---|
| true | フォームを送信するために、日付フィールドへの入力が必須となります。 |
| false | デフォルト値です。日付フィールドへの入力は必須ではありません。 |
サンプルコード
Input Date required プロパティの具体的な使用例を見てみましょう。この例では、生年月日の入力欄に required 属性を設定し、「確認」ボタンをクリックした際に日付が未入力の場合は警告メッセージを表示します。
<!DOCTYPE html>
<html>
<head>
<title>Input Date required</title>
</head>
<body>
<form>
<div>
名前： <input type="text" name="fullName">
</div>
<div>
生年月日： <input type="date" id="dateSelect" required>
</div>
</form>
<button onclick="submit()">確認</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("dateSelect");
function submit() {
if(inputDate.required==true && inputDate.value==='')
divDisplay.textContent = '生年月日は必須項目です';
else
divDisplay.textContent = '入力内容を受け付けました';
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「確認」ボタンをクリックした場合（日付が未入力のとき）：
日付フィールドに値を入力してから「確認」ボタンをクリックした場合：
このように、required プロパティを活用することで、JavaScript から動的に必須入力の判定を行い、ユーザーに入力漏れを促すことができます。HTML の required 属性と組み合わせれば、ブラウザ標準のバリデーション機能とも連携できるため、フォームの入力チェックを実装する際に非常に便利です。
-
HTML DOM入力テキスト（Input Text）のrequiredプロパティとは？使い方とサンプルコードを解説
HTML DOMのInput Text requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、特定のテキストフィールドへの入力が必須かどうかを設定したり、現在の状態を取得したりすることができます。required属性が設定されたテキストフィールドが空のままの場合、ユーザーがフォームを送信しようとしても、フォームは送信されずブラウザ側で入力を促す警告が表示されます。これにより、JavaScriptによる複雑なバリデーション処理を書かなくても、簡単に入力チェックを実装できます。
-
HTML DOM入力パスワードのrequiredプロパティとは？使い方をサンプルコード付きで解説
HTML DOMのInput Password requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、パスワード欄の入力が必須かどうかを設定したり、現在の設定状態を取得したりすることができます。required属性が設定されたパスワード欄が空のままの場合、ユーザーはフォームを送信できなくなります。 構文（Syntax） requiredプロパティの基本的な構文は以下の通りです。 requiredプロパティの設定 textObject.required = true|fals