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

HTML DOM FileUpload の required プロパティとは？取得・設定方法をサンプルコード付きで解説

HTML DOM の FileUpload required プロパティは、HTML 内のファイルアップロード用 input 要素（<input type="file">）における required 属性の値を取得・変更するためのプロパティです。required 属性が有効（true）になっている場合、ユーザーはフォームを送信する前に必ずファイルを選択しなければなりません。ファイルが未選択のまま送信しようとすると、ブラウザ側でバリデーションエラーが表示されます。

構文

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

1. required の値を取得する場合

object.required

2. required の値を設定する場合

object.required = true|false

戻り値はブール値（true / false）です。required 属性が設定されていれば true、設定されていなければ false を返します。また、true を代入すればその入力欄を必須項目に、false を代入すれば必須設定を解除できます。

サンプルコード

それでは、HTML DOM の FileUpload required プロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM file upload required Property</title>
<style>
    body{
        text-align:center;
    }
    .btn{
        display:block;
        margin:1rem auto;
        background-color:#db133a;
        color:#fff;
        border:1px solid #db133a;
        padding:0.5rem;
        border-radius:50px;
        width:20%;
    }
    .show-message{
        font-weight:bold;
        font-size:1.4rem;
        color:#ffc107;
    }
</style>
</head>
<body>
<h1>file upload required Property Example</h1>
<form id="form" method="post" action="">
<fieldset>
<legend >Form </legend>
<input type="file" required>
<input type="submit" class="btn" value="Submit Form" onclick="checkRequired()">
</fieldset>
</form>
<div class="show-message"></div>
<script>
    function checkRequired(){
        var fileBtn=document.querySelector("input[type='file']");
        if(fileBtn.value === ""){
            document.querySelector(".show-message").innerHTML = "Please Select a File!";
        }
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOM FileUpload の required プロパティとは？取得・設定方法をサンプルコード付きで解説

ファイルを選択せずに「Submit Form」ボタンをクリックすると、「Please Select a File!」（ファイルを選択してください）という警告メッセージが表示されます。

HTML DOM FileUpload の 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