3

tengo este formulario con el que valido la extension y tamaño(alto y ancho) de una imagen. El problema ocurre cuando inserto una imagen con un alto y ancho distinto al que yo quiero. la función me muestra el alert diciendo que las medidas no son validas entonces retorna falso pero por alguna razón que desconozco el formulario se envia de todas formas por mas que retorna falso en ese if(utilce una variable para ver si devolvia falso. y si devolvio falso).

Aca en la pagina me tirar error y no ejecuta, pero en el navegador funciona como mencione.
espero que alguien pueda ayudarme. No se mucho de javascript.

<script type="text/javascript">
function validar(){ 
  var o = document.getElementById('archivo');
  var foto = o.files[0];
  var c =0;
    
   

    if (o.files.length==0 || !(/\.(jpg|png)$/i).test(foto.name)) {
       
        c=1;   
        alert('Ingrese una imagen con alguno de los siguientes formatos: .jpeg/.jpg/.png.');


    }
    else {
        var img = new Image();
        img.onload = function dimension() {
            if (this.width.toFixed(0) != 900 && this.height.toFixed(0) != 400) {
              c=1;
              alert('Las medidas deben ser: 900 x 400');
              alert(c);
            }
          else {                 
                  alert('Imagen correcta :)');                                 
            }
        };
      
         img.src = URL.createObjectURL(foto);
        
    }                 
    if(c === 1){
      return false;
    }
    else{
  
      return true;
  
    }
}
</script>
<html>
<form action="" method="POST" id="formulario"  enctype="multipart/form-data" onSubmit="return validar()">
  <input name="archivo" id="archivo" type="file">
  <input type="submit" value="Cargar" name="crear" >
</form>
</html>

5
  • ¿@MSL llegaste a solucionar el error? Commented el 16 mar. 2018 a las 15:18
  • todavía no he podido solucionarlo. Estoy a prueba y error intentando
    – MSL
    Commented el 17 mar. 2018 a las 19:40
  • ¿@MSL probaste validando primero la imagen para después hacer el submit? Commented el 19 mar. 2018 a las 19:50
  • @MSL ¿aún no has podido resolverlo?
    – Marcos
    Commented el 20 mar. 2018 a las 15:02
  • Perdón la ausencia. Pude solucionarlo con su ayuda. Gracias
    – MSL
    Commented el 20 mar. 2018 a las 19:44

3 respuestas 3

2

El problema se debe a que el evento onload es asincrónico, es decir, se ejecutará en algún momento en el futuro, no inmediatamente.

Solución:

Una solución simple que podrías realizar es crear una bandera para controlar si el tamaño de la imagen es valido y cuando dicha bandera sea comprobada, recién entonces permitir el envío del formulario.

Ejemplo:

var banderaTamano = false;

function validar() {
  var o = document.getElementById('archivo');
  var foto = o.files[0];
  var c = 0;

  if (o.files.length == 0 || !(/\.(jpg|png)$/i).test(foto.name)) {
    alert('Ingrese una imagen con alguno de los siguientes formatos: .jpeg/.jpg/.png.');
    return false;
  }
   
  // Si el tamaño de la imagen fue validado
  if (banderaTamano) {
    return true;
  }

  var img = new Image();
  img.onload = function dimension() {
    if (this.width.toFixed(0) != 900 && this.height.toFixed(0) != 400) {
      alert('Las medidas deben ser: 900 x 400');
    } else {
      alert('Imagen correcta :)');
      // El tamaño de la imagen fue validado
      banderaTamano = true;
      
      // Buscamos el formulario
      var form = document.getElementById('formulario');
      // Enviamos de nuevo el formulario con la bandera modificada.
      form.submit();
    }
  };
  img.src = URL.createObjectURL(foto);
  
  // Devolvemos false porque falta validar el tamaño de la imagen
  return false;
}
<form action="" method="POST" id="formulario" enctype="multipart/form-data" onSubmit="return validar()">
  <input name="archivo" id="archivo" type="file">
  <input type="submit" value="Cargar" name="crear">
</form>

2
  • Lo que decis funciona pero para enviarlo debo presionar 2 veces enviar. La primera vez me dice que esta todo ok si ingreso correctamente la imagen, pero debo apretar enviar nuevamente para q definitivamente se envie mi foto
    – MSL
    Commented el 15 mar. 2018 a las 22:28
  • Muchas Gracias por tu ayuda me funciono. lo que si me genera algunos problemas con otros inputs pero voy a ver como lo soluciono. pero lo que pregunte me lo solucionaste. Asi de nuevo Gracias
    – MSL
    Commented el 20 mar. 2018 a las 19:42
1

Creo que te falta utilizar el this en la funcion validar para que javascript entienda que es al formulario que le esta haciendo la validacion. por ejemplo como este validar:

 function valida(f) {
  var ok = true;
  var msg = "Debes escribir contenido en los campos:\n";
  if(f.elements[0].value == "")
  {
    msg += "- Marca 1\n";
    ok = false;
  }

  if(f.elements["marca2"].value == "")
  {
    msg += "- Marca 2\n";
    ok = false;
  }

  if(f.marca3.value == "")
  {
    msg += "- Marca 3\n";
    ok = false;
  }

  if(ok == false)
    alert(msg);
  return ok;
}
</script>
</head>

y el boton o el formulario y seria mejor que la acción fuera al formulario y no al boton quedaria algo asi, asi controlarias la validacion a cualquier submit que le hagan al formulario, el ejemplo es el siguiente:

<form id="miFormulario" action="" method="get" onsubmit="return valida(this)">
1
  • No me soluciona el problema. en otro comentario me dijeron que es por el onload
    – MSL
    Commented el 15 mar. 2018 a las 22:34
1

Lo que deberías hacer es agregar un EventListener a tu formulario para que capture el evento submit. Cuando lo captures validas como lo estas haciendo pero en la condición final detendrías el evento con preventDefault().

var form = document.getElementById('formulario');

form.addEventListener("submit", validar);

function validar(event) {

  var o = document.getElementById('archivo');
  var foto = o.files[0];
  var c = 0;

  if (o.files.length == 0 || !(/\.(jpg|png)$/i).test(foto.name)) {
    c = 1;
    alert('Ingrese una imagen con alguno de los siguientes formatos: .jpeg/.jpg/.png.');
  } else {
    var img = new Image();
    img.onload = function() {
      if (this.width.toFixed(0) != 900 && this.height.toFixed(0) != 400) {
        c = 1;
        alert('Las medidas deben ser: 900 x 400');
        alert(c);
      } else {
        alert('Imagen correcta :)');
      }
    };

    img.src = URL.createObjectURL(foto);
  }
  if (c == 1)
    event.preventDefault();
}
<html>
<form action="" method="POST" id="formulario" enctype="multipart/form-data">
  <input name="archivo" id="archivo" type="file" />
  <input type="submit" value="Cargar" name="crear" />
</form>

</html>

1
  • intente hacerlo asi pero nunca se envio. en la parte final de tu ejemplo te faltan las llaves. que quisiste hacer ahi?
    – MSL
    Commented el 15 mar. 2018 a las 22:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.