Я использую Fileinput Bootstrap для полей ввода file. Ниже мой код: -Проверка подлинности JQuery на подключаемом модуле bootstrap fileinput
HTML
<input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*,video/*'>
<input id="input-upload-img2" type="file" class="file" data-preview-file-type="text" name="img2" accept='image/*,video/*'>
Javascript
<script>
$('#input-upload-img1').fileinput({
initialPreview: [
"<img src='img1' class='file-preview-image' alt='Desert'>",
]
});
</script>
Итак, теперь я первоначальный предварительный просмотр на одном из моего поля ввода, имеющего идентификатор input-upload-img1 и нет предварительный просмотр в другом поле ввода.
Теперь я применяю JQuery проверки поля ввода
img1: {
require_from_group: [1, '.file'],
accept: "image/*"
},
img2: {
require_from_group: [1, '.file'],
accept: "image/*"
}
Но, когда я отправить форму, он по-прежнему показывает ошибку говоря Atleast 1 field is required. Почему это происходит, когда я уже предоставил изображение в первом поле ввода? Кроме того, если я снова просмотрю отдельно. это будет работать.
Почему проверка JQuery показывает ошибку, когда начальное поле предварительного просмотра уже предоставлено.
Ниже мой манекен код: -
<!DOCTYPE>
<html>
<head>
<style type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/css/fileinput.min.css"></style>
</head>
<body>
<form>
<input id="input-upload-img1" type="file" class="file" data-preview-file-type="text" name="img1" accept='image/*'>
<button type="submit">Submit</button>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/js/fileinput.min.js"></script>
<script type="text/javascript">
$("#input-upload-img1").fileinput({
initialPreview: [
"<img src='http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg' class='file-preview-image' width=20% height=20%>"
]
});
$('form').validate({
rules: {
img1: {
require_from_group: [1, '.file'],
accept: "image/*,video/*",
filesize: 100000000
}
}
})
</script>
</html>
Как вы можете видеть, что есть изначально изображение в поле ввода. Но когда я отправляю форму, она возвращает ошибку, указывающую Please fill at least 1 of these field, так как нет файла. Как я могу это преодолеть?
Вот jsfiddle. Но он каким-то образом не отображает предварительный просмотр изображения, поэтому я рекомендую вам скопировать этот код и запустить его в своей собственной системе.
Кажется, для меня работает. Я не могу отправить форму до тех пор, пока не выберу хотя бы одно изображение: https://jsfiddle.net/g7ugaejs/ – Sparky
В этом проблема. Мне должно быть позволено отправить форму, потому что предварительный предварительный просмотр уже предоставлен для одного из полей входного файла. – PythonEnthusiast
Возможно, вы смущены тем, что означает правило 'require_from_group'. Правило гласит, что должно быть завершено хотя бы одно поле.Как только вы [выберите файл для загрузки, правило будет полностью удовлетворено, и форма будет разрешена для отправки] (https://jsfiddle.net/g7ugaejs/). В противном случае я не понимаю эту проблему, поскольку вы ее описываете. – Sparky