Making 'file' input element mandatory (required)

Question

I want to make (an HTML) \'file\' input element mandatory: something like

But it i

Answer 1

All statements above are entirely correct. However, it is possible for a malicious user to send a POST request without using your form in order to generate errors. Thus, HTML and JS, while offering a user-friendly approach, will not prevent these sorts of attacks. To do so, make sure that your server double checks request data to make sure nothing is empty.

Answer 2

https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/

<button onclick="myFunction()">Try it</button> 


<p id="geeks"></p> 

<script> 
    function myFunction() { 
        var inpObj = document.getElementById("gfg"); 
        if (!inpObj.checkValidity()) { 
            document.getElementById("geeks") 
                    .innerHTML = inpObj.validationMessage; 
        } else { 
            document.getElementById("geeks") 
                    .innerHTML = "Input is ALL RIGHT"; 
        } 
    } 
</script> 

Answer 3

Some times the input field is not bound with the form. I might seem within the <form> and </form> tags but it is outside these tags.

You can try applying the form attribute to the input field to make sure it is related to your form.

<input type="file" name="" required=""  form="YOUR-FORM-ID-HERE"  />

I hope it helps.

Answer 4

You can do it using Jquery like this:-

<script type="text/javascript">
$(document).ready(function() {
    $('#upload').bind("click",function() 
    { 
        var imgVal = $('#uploadfile').val(); 
        if(imgVal=='') 
        { 
            alert("empty input file"); 
            return false; 
        } 


    }); 
});
</script> 

<input type="file" name="image" id="uploadfile" size="30" /> 
<input type="submit" name="upload" id="upload"  class="send_upload" value="upload" />

Answer 5

var imgVal = $('[type=file]').val(); 

Similar to Vivek's suggestion, but now you have a more generic selector of the input file and you don't rely on specific ID or class.

See this demo.

Answer 6

You could create a polyfill that executes on the form submit. For example:

/* Attach the form event when jQuery loads. */
$(document).ready(function(e){

/* Handle any form's submit event. */
    $("form").submit(function(e){

        e.preventDefault();                 /* Stop the form from submitting immediately. */
        var continueInvoke = true;          /* Variable used to avoid $(this) scope confusion with .each() function. */

        /* Loop through each form element that has the required="" attribute. */
        $("form input[required]").each(function(){

            /* If the element has no value. */
            if($(this).val() == ""){
                continueInvoke = false;     /* Set the variable to false, to indicate that the form should not be submited. */
            }

        });

        /* Read the variable. Detect any items with no value. */
        if(continueInvoke == true){
            $(this).submit();               /* Submit the form. */
        }

    });

});

This script waits for the form to be submitted, then loops though each form element that has the required attribute has a value entered. If everything has a value, it submits the form.

An example element to be checked could be:

<input type="file" name="file_input" required="true" />

(You can remove the comments & minify this code when using it on your website)