Я хочу, чтобы элемент ввода "file" был обязательным: что-то вроде
<input type='file' required = 'required' .../>
Но он не работает.
Я видел это руководство WW3, в котором говорится, что атрибут 'required' является новым для HTML 5. Но я не использую HTML 5 в проекте я который не поддерживает новую функцию.
Любая идея?
Благодаря HTML5 это так же просто:
<input type='file' required />
Пример:
<form>
<input type='file' required />
<button type="submit"> Submit </button>
</form>Вы можете сделать это с помощью 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" />
Вы можете создать polyfill, который будет выполняться в форме submit. Например:
/* Attach the form event when jQuery loads. */
$(document).ready(function(e){
/* Handle any form 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. */
}
});
});
Этот script ждет отправки формы, а затем петли, хотя каждый элемент формы, у которого есть атрибут required, имеет введенное значение. Если все имеет значение, оно отправляет форму.
Элемент, который нужно проверить, может быть:
<input type="file" name="file_input" required="true" />
(Вы можете удалить комментарии и уменьшить этот код при использовании его на своем веб-сайте)
На данный момент в 2017 году я могу сделать this-
<input type='file' required />
и когда вы отправляете форму, он запрашивает файл. 
var imgVal = $('[type=file]').val();
Подобно предложению Vivek, но теперь у вас есть более общий селектор входного файла, и вы не полагаетесь на определенный идентификатор или класс.
Все приведенные выше утверждения полностью верны. Однако злонамеренный пользователь может отправить запрос POST, не используя вашу форму, чтобы генерировать ошибки. Таким образом, HTML и JS, предлагая удобный для пользователя подход, не предотвратят подобные атаки. Для этого убедитесь, что ваш сервер дважды проверил данные запроса, чтобы убедиться, что ничего не пусто.
Иногда поле ввода не связано с формой. Может показаться, что внутри тегов <form> and </form> но это за пределами этих тегов.
Вы можете попробовать применить атрибут формы к полю ввода, чтобы убедиться, что он связан с вашей формой.
<input type="file" name="" required="" form="YOUR-FORM-ID-HERE" />
Я надеюсь, что это помогает.