2

Tengo un inconveniente intentando validar unos inputs type="file" con jquery validate, enumero los peros:

  1. Como todos los inputs no son requeridos (solo 1 y 2) el campo name se rellena con un arreglo desde php al momento de enviar. Por eso el... (name="attachment[]")
  2. Al momento de validar, no me toma la validación , rules/messages, en Jquery validate; supongo que tengo que usar los ID, pero no se como hacerlo.

La idea es validar tanto que sea obligatorios el input 1 y 2, y verificar que en todos los inputs se cumpla la condición del formato de archivos al momento de subir.

$('#contact-form').validate({
  rules: {
    attachment: {required: true, extension: "jpg|png|pdf"}
    },
  messages: {
    attachment: {
      required: "Seleccione un archivo",
      extension: "Formato de archivo incorrecto"
    },
  },
  // desde aqui se procesa el envio
  highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
  },
  success: function(element) {
    element
    // .text('OK!').addClass('valid')
    .closest('.control-group').removeClass('error').addClass('success');
  }
});
<form action="" id="contact-form" method="post" enctype="multipart/form-data" >
  <div class="regFila1">
    <input type="file" name="attachment[]" id="fdui" accept=".jpg,jpeg,.png,.pdf" required /><br>
    <input type="file" name="attachment[]" id="rdui" accept=".jpg,jpeg,.png,.pdf" required /><br>
    <input type="file" name="attachment[]" id="const" accept=".jpg,jpeg,.png,.pdf" /><br>
    <input type="file" name="attachment[]" id="bill" accept=".jpg,jpeg,.png,.pdf" /><br>
  </div>
  <br>
  <input name="Submit2" type="submit" class="send" value="ENVIAR" />
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

5
  • ¿Necesariamente lo tienes que hace con jQuery Validate? Usando solo jQuery sería relativamente sencilla la solución
    – Rodrigo
    Commented el 8 feb. 2021 a las 21:13
  • @anythingg no tengo preferencia por uno o el otro, si con jquery basta para mí está bien, pensándolo bien también necesito validar si el archivo pesa mas de 2Mb
    – Elboy
    Commented el 8 feb. 2021 a las 22:34
  • Hola @Elboy, ¿qué es exactamente lo que quieres hacer? Es decir, ¿podrías dar un poco más de contexto sobre que lo que quieres lograr? Por ejemplo, si colocas varios inputs porque quieres permitir al usuario enviar múltiples archivos y la cantidad mínima a enviar son dos archivos. Commented el 13 feb. 2021 a las 6:36
  • ¿O simplemente, esos inputs son para cada tipo de envío? Si lo que quieres es permitir al usuario enviar múltiples archivos puede utilizar un solo input file. Esos múltiples archivos lo podría entender el servidor como un array. Si ese es el caso, podrías colocar un nombre seguido de un par de corchetes ([]), por ejemplo, name="archivo[]" y establecer el atributo multiple. Commented el 13 feb. 2021 a las 6:40
  • @DavidE.LunaM. Cada input es para un archivo específico, pero solamente 2 son obligatorios; Documentos: (Frente, reverso), el resto es para otros comprobantes pero que no siempre tiene a mano el usuario asi que puede gestionarse su obtención una vez iniciado el proceso, logré realizar las validaciones en la entrada que coloqué mas abajo..
    – Elboy
    Commented el 13 feb. 2021 a las 14:29

2 respuestas 2

1

La solución es relativamente sencilla, solo usa los atributos HTML:

<form action="" id="contact-form" method="post" enctype="multipart/form-data" >
  <div class="regFila1">
    <input type="file" name="attachment[]" id="fdui" accept=".jpg,jpeg,.png,.pdf" required /><br>
    <input type="file" name="attachment[]" id="rdui" accept=".jpg,jpeg,.png,.pdf" required /><br>
    <input type="file" name="attachment[]" id="const" accept=".jpg,jpeg,.png,.pdf" /><br>
    <input type="file" name="attachment[]" id="bill" accept=".jpg,jpeg,.png,.pdf" /><br>
  </div>
  <br>
  <input name="Submit2" type="submit" class="send" value="ENVIAR" />
</form>

De manera, que dos son requeridos, pero todos aceptan archivos .jpg, .jpeg, .png, .pdf

Si tienes un gran número de inputs, lo puedes hacer con una función, para recorrer cada elemento del formulario

function ValidationInit(formSelector, inputType, rules) {
  try {
    document.querySelectorAll(formSelector).forEach(form => {
      form.querySelectorAll("input, textarea").forEach(el => {
        Object.entries(rules).forEach(entry => {
          const [key, value] = entry;
          if (el["type"] === inputType) {
            el.setAttribute(key,value);
          }
        });
      });
    });
    return true;
  } catch(exp) {
    return exp;
  }
}

ValidationInit("#contact-form", "file", {accept:".jpg,jpeg,.png,.pdf"});
<form action="" id="contact-form" method="post" enctype="multipart/form-data" >
  <div class="regFila1">
    <input type="file" id="fdui" required /><br>
    <input type="file" id="rdui" required /><br>
    <input type="file" id="const" /><br>
    <input type="file" id="bill" /><br>
  </div>
  <br>
  <input name="Submit2" type="submit" class="send" value="ENVIAR" />
</form>

Recibimos un selector, haremos un Try / Catch, ya que podremos detectar excepciones y devolverlas, además, recorreremos todos los inputs y textareas del elemento con dicho selector, finalmente aplicaremos algunas reglas a los elementos

Ahora, teniendo esto, como dices, necesitas saber si algún archivo pesa más de 2MB

Podemos obtener el peso del archivo subido con .size, una manera rápida sería insertar el .size de cada input en un array y usar el método .some para comprobar si existe algún elemento superior a los 2MB

document.querySelector("#contact-form").addEventListener("submit", e => {
  const sizes = [];
  document.querySelectorAll("#contact-form input").forEach(el => {
    if (el.type !== "file") return;
    if(!el.files[0]) return sizes.push("undefined");
    let _size = el.files[0].size;
    let fSExt = new Array('Bytes', 'KB', 'MB', 'GB'),
    i=0;while(_size>900){_size/=1024;i++;}
    let exactSize = (Math.round(_size*100)/100)+' '+fSExt[i];
    sizes.push(exactSize);
  });
  if(sizes.some(el=>(el.replace(" MB", "") - 0) >= 2)) {
    e.preventDefault();
    alert("Solo se admiten archivos inferiores a 2MB");
  }
});
<form action="" id="contact-form" method="post" enctype="multipart/form-data" >
  <div class="regFila1">
    <input type="file" name="attachment[]" id="fdui" accept=".jpg,jpeg,.png,.pdf" required /><br>
    <input type="file" name="attachment[]" id="rdui" accept=".jpg,jpeg,.png,.pdf" required /><br>
    <input type="file" name="attachment[]" id="const" accept=".jpg,jpeg,.png,.pdf" /><br>
    <input type="file" name="attachment[]" id="bill" accept=".jpg,jpeg,.png,.pdf" /><br>
  </div>
  <br>
  <input name="Submit2" type="submit" class="send" value="ENVIAR" />
</form>

Obtenemos el peso del archivo, luego lo insertamos en un array, finalmente podemos obtener

X KB
X MB

Por eso lo reemplazamos

el.replace(" MB", "")

Nos quedaría solo X, donde X es un número convertible con -0 (un string no puede ser restado con un entero, por lo que se convertirá a un entero), al tener ya el número, simplemente comprobamos que sea mayor que 2, y de serlo hace un preventDefault para evitar que se proceda con el envío del formulario, el parseInt dará NaN si el archivo pesa menos de 1MB

Finalmente, para mostrar un mensaje al usuario, podemos usar una clase de CSS y un ::after para poner el mensaje, también marcaremos los campos requeridos con un atributo data-required

document.querySelector("#contact-form").addEventListener("submit", e => {
  const sizes = [];
  document.querySelectorAll("#contact-form input").forEach(el => {
    if (el.type !== "file") return;
    if(!el.files[0]) return sizes.push({size:"0",elem:el});
    let _size = el.files[0].size;
    let fSExt = new Array('Bytes', 'KB', 'MB', 'GB'),
    i=0;while(_size>900){_size/=1024;i++;}
    let exactSize = (Math.round(_size*100)/100)+' '+fSExt[i];
    sizes.push({size:exactSize,elem:el});
  });
  sizes.forEach(el => {
    if(el.size === "0") {
      if (el.elem.getAttribute("data-required")) {
        e.preventDefault();
        el.elem.classList.add("needsValidation");
      }
    }
    if ((el.size.replace(" MB", "")) - 0 >= 2) {
      e.preventDefault();
      el.elem.classList.add("fileSizeExceded");
    }
  });
});
input {
  padding:8px;
  border:solid 1px #c6c6c6c1;
  border-radius:8px;
  display:block;
  transition:0.3s;
  -webkit-transition:0.3s;
  -moz-transition:0.3s;
  -o-transition:0.3s;
}

.needsValidation,.fileSizeExceded {
  border:solid 1px red;
}

.needsValidation::after {
  content:"Este campo es obligatorio";
  color:red;
  display:inline-block;
  position:absolute;
  margin-left:25px;
}

.fileSizeExceded::after {
  content:"Solo se admiten archivos menores a 2MB";
  color:red;
  display:inline-block;
  position:absolute;
  margin-left:25px;
}

@media screen and (max-width:980px) {
  .needsValidation::after,.fileSizeExceded::after {
    margin:0;
    position:relative;
    display:block;
  }
}
<form action="" id="contact-form" method="post" enctype="multipart/form-data" >
  <div class="regFila1">
    <input type="file" name="attachment[]" id="fdui" accept=".jpg,jpeg,.png,.pdf" data-required="t" /><br>
    <input type="file" name="attachment[]" id="rdui" accept=".jpg,jpeg,.png,.pdf" data-required="t" /><br>
    <input type="file" name="attachment[]" id="const" accept=".jpg,jpeg,.png,.pdf" /><br>
    <input type="file" name="attachment[]" id="bill" accept=".jpg,jpeg,.png,.pdf" /><br>
  </div>
  <br>
  <input name="Submit2" type="submit" class="send" value="ENVIAR" />
</form>

3
  • Gracias por el detalle, con respecto al tamaño máximo de archivo, me funciona, pero en consola arroja lo siguiente "Uncaught TypeError: document.querySelector(...) is null" Supongo que es porque estoy llenando subiendo solo 2 archivos. La primera parte, la validación del formato no me funciona, y aunque tenga como required en el html, con solo adjuntar el primero se envia el formulario.
    – Elboy
    Commented el 9 feb. 2021 a las 2:23
  • @Elboy ¿Podrías poner un ejemplo reproducible de lo que tienes? Así podré ver que está fallando, arreglarlo y explicarlo
    – Rodrigo
    Commented el 9 feb. 2021 a las 2:49
  • Ayer me puse a indagar un poco más sobre jquery validate y logré algunas cosas, dejo lo que ha logrado, solo tengo unos inconvenientes para validar después del primer archivo
    – Elboy
    Commented el 9 feb. 2021 a las 14:56
0

He hecho algunas modificaciones y he logrado que realice la validación del tipo de archivo y el peso (lo aumente a 3mb), parece funcionar bien. según esta entrada

Adicionalmente modifiqué una función del archivo jquery.validate.js, encontre info en esta entrada

checkForm: function() {
    this.prepareForm();
    for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
      if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) {
        for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) {
          this.check(this.findByName(elements[i].name)[cnt]);
        }
      } else {
        this.check(elements[i]);
      }
    }
    return this.valid();
}

Para que solo los dos primeros campos sean obrigatorios, no declaro la condición en jquery validate, solamente el mensaje de error. En su lugar coloco el parámetro required en los 2 primeros inputs del formulario, de esta forma hrml5 se encargará de gestionarlos.

// Regla para validar tamaño máximo de archivo
$.validator.addMethod('filesize', function (value, element, param) {
    return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0}');

$('#contact-form').validate({
  rules: {
    'attachment[]': {
      // required: true, // dejar que html5 gestione esta parte
      accept: "jpg,jpeg,png,pdf",
      filesize: 3145728
    },
  }, // end rules
  messages: {
    'attachment[]': {
    required: 'Debes adjuntar un archivo',
    accept: 'Formato de archivo no soportado',
    filesize: 'El tamaño máximo permitido es de 3mb'
    }
  }, // end messages

});
<!DOCTYPE html>
<html lang="es">
<body>
<form action="" id="contact-form" method="post" enctype="multipart/form-data" >
  <div class="regFila1">
    <input type="file" name="attachment[]" id="fdui" accept=".jpg,jpeg,.png,.pdf" required/><br>
    <input type="file" name="attachment[]" id="rdui" accept=".jpg,jpeg,.png,.pdf" required/><br>
    <input type="file" name="attachment[]" id="const" accept=".jpg,jpeg,.png,.pdf" /><br>
    <input type="file" name="attachment[]" id="bill" accept=".jpg,jpeg,.png,.pdf" /><br>
  </div>
  <br>
  <input name="Submit2" type="submit" class="send" value="ENVIAR" />
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
</body>

</html>

No se puede apreciar correctamente que todos los campos están validados ya que no encontré como incrustar el fragménto de código para editar el archivo jquery.validate.js, así que lo edité directamente.

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.