HTML DOM Input FileUpload required প্রপার্টি

HTML DOM Input FileUpload required প্রপার্টি একটি ফাইল আপলোড ইনপুট এলিমেন্টের required অ্যাট্রিবিউটের মান পাওয়া ও সেট করার জন্য ব্যবহৃত হয়। এটি নির্দেশ করে যে ফর্ম সাবমিট করার আগে ব্যবহারকারীকে অবশ্যই একটি ফাইল সিলেক্ট করতে হবে।

সিনট্যাক্স

মান পাওয়া:

object.required

মান সেট করা:

object.required = true | false

উদাহরণ: রিকোয়ার্ড ফাইল আপলোড ভ্যালিডেশন

<!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>

আউটপুট

• ফাইল সিলেক্ট না করেই "Submit Form" বাটনে ক্লিক করলে ব্রাউজার ডিফল্ট ভ্যালিডেশন মেসেজ দেখাবে (HTML5 ভ্যালিডেশন)।
• জাভাস্ক্রিপ্টে কাস্টম মেসেজও দেখানো হয়: "Please Select a File!"

ব্যবহারিক পরামর্শ

• HTML5-এ required অ্যাট্রিবিউট যোগ করলেই ব্রাউজার স্বয়ংক্রিয় ভ্যালিডেশন করে।
• জাভাস্ক্রিপ্টে fileBtn.required দিয়ে ডাইনামিক্যালি বাধ্যতামূলক করা/হটানো যায়।
• সার্ভার-সাইড ভ্যালিডেশন অবশ্যই রাখুন — ক্লায়েন্ট-সাইড ভ্যালিডেশন বাইপাস করা যায়।