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

HTML DOM Input DatetimeLocalのrequiredプロパティ徹底解説

HTML DOM Input DatetimeLocalのrequiredプロパティとは

HTML DOMのInput DatetimeLocalオブジェクトが持つrequiredプロパティは、datetime-local入力フィールドの設定がフォーム送信時に必須かどうかを判定・制御するためのプロパティです。このプロパティを活用することで、JavaScriptから動的に必須項目の状態を取得したり、変更したりすることが可能になります。

構文

requiredプロパティの基本的な構文は以下の通りです。

ブール値(true/false)を取得する場合:

inputDatetimeLocalObject.required

ブール値を設定する場合:

inputDatetimeLocalObject.required = booleanValue

設定できるブール値

「booleanValue」には以下のいずれかの値を指定します。

値説明
truedatetime-localフィールドへの入力が必須となり、未入力のままではフォームを送信できません。
falseデフォルト値です。datetime-localフィールドへの入力は任意となり、空欄でもフォーム送信が可能です。

サンプルコード

それでは、Input DatetimeLocalのrequiredプロパティの実際の使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal required</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Datetime-Local-required</legend>
<label for="datetimeLocalSelect">Examination Slot :
<input type="datetime-local" id="datetimeLocalSelect" value="" required>
</label>
<input type="button" onclick="confirmSlotBooking()" value="Confirm Slot">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
    divDisplay.textContent = 'Slot Required: '+inputDatetimeLocal.required;
    function confirmSlotBooking() {
        if(inputDatetimeLocal.value === '')
            divDisplay.textContent += ', Choose a valid Exam Slot. ';
        else
            divDisplay.textContent = 'Slot Confirmed: '+inputDatetimeLocal.required+', Your Slot: '+inputDatetimeLocal.value;
    }
</script>
</body>
</html>

実行結果

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

初期表示時には、requiredプロパティがtrueに設定されているため、「Slot Required: true」と表示されます。

「Confirm Slot」ボタンをクリックした場合:

HTML DOM Input DatetimeLocalのrequiredプロパティ徹底解説

datetime-localフィールドに値が設定されていない状態でボタンをクリックすると、「Choose a valid Exam Slot(有効な試験スロットを選択してください)」というメッセージが表示されます。

datetime-localフィールドに値を設定してから「Confirm Slot」ボタンをクリックした場合:

HTML DOM Input DatetimeLocalのrequiredプロパティ徹底解説

値が正しく入力されている場合は、「Slot Confirmed(スロット確定)」と選択した日時が表示されます。

まとめ

requiredプロパティを使えば、HTMLのrequired属性で設定した必須状態をJavaScriptから参照・操作できます。フォームバリデーションを動的に制御したい場合に非常に便利なプロパティなので、ぜひ活用してみてください。

  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