Question

我想强制使用（HTML）'文件'输入元素：类似

<input type='file' required = 'required' .../>

但它没有用。

我看到了这个WW3手册，其中指出'required'属性是HTML 5的新功能。但是我在我正在使用的不支持新功能的项目中没有使用HTML 5。

有什么想法吗？

Answer 1

感谢HTML5，它就像这样简单：

<input type='file' required />

示例：

＆＃13;
＆＃13;
<form> <input type='file' required /> <button type="submit"> Submit </button> </form>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你可以使用Jquery这样做： -

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

您可以创建在表单提交时执行的填充。例如：

/* 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. */
        }

    });

});

此脚本等待提交表单，然后循环，但每个具有required属性的表单元素都输入了值。如果所有内容都有值，则提交表单。

要检查的示例元素可以是：

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

（您可以删除评论并在网站上使用时缩小此代码）

Answer 4

截至2017年，我能够做到这一点 -

<input type='file' required />

当您提交表单时，它会要求提供文件。

Answer 5

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

与Vivek的建议类似，但现在您有一个更通用的输入文件选择器，而且您不依赖于特定的ID或类。

See this demo

Answer 6

以上所有陈述都是完全正确的。但是，恶意用户可能会在不使用您的表单的情况下发送POST请求以生成错误。因此，HTML和JS虽然提供了用户友好的方法，但不会阻止这些类型的攻击。为此，请确保您的服务器双重检查请求数据以确保没有任何内容。

Answer 7

有时输入字段未与表单绑定。我可能似乎在<form> and </form>标记内，但它不在这些标记内。

您可以尝试将form属性应用于输入字段，以确保它与您的表单相关。

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

希望对您有帮助。

Answer 8

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>

使'file'输入元素成为必需的（必需）

8 个答案: