Estoy intentando validar un formulario usando JavaScript. Sin embargo, cuando corro el flujo del programa no me valida las opciones si estan vacias o estan llenas. Alguien me ayuda por favor? Saludos!
"use strict";
const btnGuardar = document.getElementById('btnGuardar');
let validar = () =>{
let requeridos = document.querySelectorAll('#frm-agregar [required]');
let error = false;
for (let i = 0; i < requeridos.length; i++) {
if (requeridos[i].value == "") {
requeridos[i].classList.add('input-error'); // ClassList me va obtener css
error = true;
console.log(error);
}else{
equeridos[i].classList.remove('input-error');
console.log(error);
}
}
return error;
}
btnGuardar.addEventListener('click', validar); //Llamo al metodo validar.
.input-error{
border: 2px solid red;
}
<form id="frm-agregar">
<div class="caja">
<label for="country">Seleccione un producto</label>
<select class="section-article" required id="country" name="country">
<option value="australia">Computadora</option>
<option value="usa">Celulares</option>
<option value="usa">Otros</option>
</select>
</div>
<label for="lname">Nombre del producto</label>
<input type="text" id="lname" required name="lastname" placeholder="Nombre del producto">
<label for="lname">Cantidad de articulos</label>
<input type="text" required id="lname" name="lastname"
placeholder="Ingrese su correo electronico">
<label for="lname">Precio</label>
<input type="text" required id="lname" name="lastname" placeholder="Your last name..">
<label for="lname">Fecha de publicacion</label>
<input type="date" required id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Estado</label>
<select id="country" name="country">
<option value="australia">Activo</option>
<option value="usa">Inactivo</option>
</select>
<input type="submit" class="enviar" id="btnGuardar" value="Enviar">
<input type="submit" class="cancelar" value="Cancelar">
</form>