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>
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 atributomultiple
.