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

HTML DOM Input Weekのrequiredプロパティとは？使い方とサンプルコードを解説

HTML DOMのInput Weekオブジェクトにおけるrequiredプロパティは、週入力フィールド（<input type="week">）への入力が、フォーム送信時に必須かどうかを取得・設定するためのプロパティです。

構文

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

ブール値（true / false）を取得する場合

inputWeekObject.required

requiredプロパティに値を設定する場合

inputWeekObject.required = booleanValue

指定できるブール値

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

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

サンプルコード

Input Weekのrequiredプロパティを使った具体的な例を見てみましょう。この例では、週フィールドにrequired属性が設定されており、ボタンをクリックするとその状態を確認できます。

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>Week-required</legend>
<label for="WeekSelect">Examination Week:
<input type="week" id="WeekSelect" required>
</label>
<input type="button" onclick="confirmWeek()" value="Confirm Week">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    divDisplay.textContent = 'Week Input Required: '+inputWeek.required;
    function confirmWeek() {
        if(inputWeek.value === '')
            divDisplay.textContent += ', Choose a valid Week. ';
        else
            divDisplay.textContent = 'Week Confirmed: '+inputWeek.required;
    }
</script>
</body>
</html>

実行結果

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

「Confirm Week」ボタンをクリックした場合：

HTML DOM Input Weekのrequiredプロパティとは？使い方とサンプルコードを解説

週フィールドに値が設定された状態で「Confirm Week」ボタンをクリックした場合：

HTML DOM Input Weekのrequiredプロパティとは？使い方とサンプルコードを解説

まとめ

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