Как с помощью jQuery проверить, что пользователь загружает файл, используя HTML-форму?

#javascript #jquery #validation #jquery-validate

#javascript #jquery #проверка #jquery-проверка

Вопрос:

Я хочу проверить, что пользователь не оставит поле ввода файла enpty.

Я использую проверку плагина jQuery. По этой ссылке есть демонстрация того, как должен работать плагин.

Я добавил файлы в нижний колонтитул своей страницы (и проверил, что они действительно там):

 <!-- jQuery y Bootstrap minificados -->
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- validacion de los campos de los formularios -->
<script src="/js/validate/jquery.validate.min.js"></script>
<script src="/js/validate/additional-methods.min.js"></script>
<!-- My file -->
<script src="/js/formularios.js"></script>
  

В моем formularios.js файл, который я добавил, это:

 //validación de la data en el formulario de carga de documentación
$().ready(function {

  $("#cargarDoc").validate({
    rules: {
              dni: {
                required: true,
                extension: "gif|jpeg|jpg|png"
              },
    messages:{
              dni: {
                required: "No puedes dejar este campo en blanco",
                extension: "Solamente puedes cargar archivos del tipo: gif, jpeg, jpg o png"
              }
    }
    }
  })
})
  

И вот моя HTML-форма:

 <form id="cargarDoc" method="POST" action ="cargarDoc.php" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
<div class="form-group">
<label for="dni">Cargá acá tu DNI</label>
<input type="file" id="dni" name="dni">
</div>          
<button type="submit">Cargar Documentación</button>
</form>
  

Теперь, когда я отправляю форму, даже пустую, она позволяет мне. Что я делаю не так?

Ответ №1:

Проблема заключается в синтаксической ошибке, вероятно, вызванной неправильным отступом кода.

 /validación de la data en el formulario de carga de documentación
$().ready(function {

  $("#cargarDoc").validate({
        rules: {
            dni: {
                required: true,
                extension: "gif|jpeg|jpg|png"
            }
        },
        messages:{
            dni: {
                required: "No puedes dejar este campo en blanco",
                extension: "Solamente puedes cargar archivos del tipo: gif, jpeg, jpg o png"
            }
        }
    });
});
  

Сравните приведенный выше код с вашим кодом, чтобы увидеть тонкую разницу.

Validate использует объекты для определения своего поведения.

«правила», «сообщение» и «dni» являются объектами.
Объект определяется между фигурными скобками: { и } , и формируется из key value пар и .

Объект может включать в себя другие объекты…
Это относится к «правилам» и «сообщению», которые оба включают свой собственный объект «dni».

Кома , внутри объекта используется в качестве разделителя.

Точка с запятой ; используется для разделения операторов во многих языках программирования.