Validar campo Imput

Rebeca · Julio 22, 2021, 04:08:38 PM

Hola a todos, quiero validar el campo input, que si esta vacío no me permita seguir...

lo logre con las extensiones, pero no así con si esta vacío o no..

mi html:

Código: html5

<div class="mb-3 fondo">
  <label for="exampleFormControlInput1" class="form-label"><b>Elija una Imagen (2)</b></label>
  <input type="file" class="form-control" name="my_files[]" multiple id="archivoInput" onchange="return validarExt()">
</div>

y el código de JavaScript

Código: javascript

function validarExt()
{
    var archivoInput = document.getElementById('archivoInput');
    var files = document.getElementById('archivoInput').files;
   
    var archivoRuta = archivoInput.value;
    var extPermitidas = /(.png|.gif|.jpg)$/i;
    if(!extPermitidas.exec(archivoRuta)){
        alert('Asegurese de haber seleccionado una Imagen');
        archivoInput.value = '';
        return false;
    }
    if (!files.length) {
      alert('selecciones un fila !');
      return false;


    }
  }
  </script>

Muchas gracias de antemano por su tiempo ..
Saludos.!!!
Rebe

Lautaro Villarreal Culic' · Julio 23, 2021, 03:44:11 AM

Hola Rebe! Como estas?

Mira, te comento. Me descargue tu código y lo hice solo en un archivo HTML para que se me haga más cómodo.

No entendí la parte de que "no te permita seguir". Al menos, con este código html que ahora te pasaré, cuando intentas colocar en el botón "Abrir" sin seleccionar ningún archivo no te abre nada, es decir, no hace nada. Directamente no selecciona nada.

Por otro lado, como buenas prácticas, te sugiero que a las validaciones las hagas desde el campo input y no desde un script, por ejemplo, como atributo en el campo input que anteriormente mencionabamos, hay un atributo que se llama "accept".
En el que le pones por ejemplo, si queres que solo se suban imágenes colocas accept="images/*" (el aterisco selecciona todas las imágenes que sean compatibles con HTML, por ejemplo, para que solo puedas subir videos colocas accept="video/*", o podes especificar con accept="video/mp4".
En tu caso, ví que solo queres permitir subir archivos jpg, png y gifs, lo ideal sería colocarle el atributo (como se ve en el código de abajo) lo siguiente: accept="image/,.jpg,.png,.gif" no olvides colocar una , delante de cada extensión.
Así con esto te ahorras hacer la validación mediante un script y de paso evitas algún tipo de fallo de seguridad.
Luego, en el atributo del input "onchange" el return está de más, ya que es redundante. De esta forma, si en la ventana de windows a la hora de seleccionar un archivo, colocas la opción "Todos los archivos (*)" y elijes un .txt, salta el script que vos abajo colocaste.

Código: php


<html>

    <body>

        <div class="mb-3 fondo">
            <label for="exampleFormControlInput1" class="form-label"><b>Elija una Imagen (2)</b></label>
            <input type="file" class="form-control" name="my_files[]" multiple accept="image/,.jpg,.png,.gif" id="archivoInput" onchange="validarExt()">
        </div>

    <script>
      
            function validarExt()
            {
                var archivoInput = document.getElementById('archivoInput');
                var files = document.getElementById('archivoInput').files;
            
                var archivoRuta = archivoInput.value;
                var extPermitidas = /(.png|.gif|.jpg)$/i;
                if(!extPermitidas.exec(archivoRuta)){
                    alert('Asegurese de haber seleccionado una Imagen');
                    archivoInput.value = '';
                    return false;
                }
                if (!files.length) {
                alert('selecciones un fila !');
                return false;


                }
            }
    </script>

    </body>

</html>

Saludosss

Edit:
Cuidado Rebe con el atributo "multiple" del input, porque si seleccionas un archivo .png y un .txt con la opción "Todos los archivos (*)" te permite subir ambos archivos y se salta la validación

Rebeca · Julio 23, 2021, 04:44:40 PM

Hola Gracias por responder, lo del input, lo sabia, pero se que desde la consola lo pueden borrar y aceptar cualquier archivo, por eso la idea de validar con JavaScript
Nooo sabia es verdad, elijo una imagen y un txt y me lo toma, pero si elijo una imagen y un doc, no me lo toma.. que raro.. como validar un TXT?'....

el siguiente codigo lo que hace es que salga un alert cuando eliges archivos que no son imagenes...

Código: javascript

<script type="text/javascript">
function validarExt()
{
    var archivoInput = document.getElementById('archivoInput');
    var files = document.getElementById('archivoInput').files;
   
    var archivoRuta = archivoInput.value;
    var extPermitidas = /(.png|.gif|.jpg)$/i;
    if(!extPermitidas.exec(archivoRuta)){
        alert('Asegurese de haber seleccionado una Imagen');
        archivoInput.value = '';
        return false;
    }
    if (!files.length) { //linea 217
      alert('selecciones un fila !');
      return false;


    }
  }
  </script>

Desde la lineal 217 no funciona

Gracias por tu repuesta
Saludos a todos
rebe
Pd: Hice lo del input ponerle "accept=".jpg, .jpeg, .png"
se agradece

Validar campo Imput

Rebeca

Julio 22, 2021, 04:08:38 PM Ultima modificación: Julio 23, 2021, 03:08:09 AM por Gabriela

Lautaro Villarreal Culic'

Julio 23, 2021, 03:44:11 AM #1 Ultima modificación: Julio 23, 2021, 03:51:36 AM por Lautaro Villarreal Culic'

Rebeca

Julio 23, 2021, 04:44:40 PM #2