Skip to main content
se añadieron 73 caracteres en el cuerpo
Origen Enlace
"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{
            requeridos[i].classList.remove('input-error');
            console.log(error); 
        }
    
    }
    return error;
}

btnGuardar.addEventListener('click', validar); //Llamo al metodo validar.
.input-error{
    border: 2px solid red;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <form id="frm-agregar">
        <div class="caja">
            <label for="producto">Seleccione un producto</label>
            <select class="section-article" required id="country" name="country">
                <option value="">Seleccione una opción</option>
                <option value="Computadora">Computadora</option>
                <option value="Celulares">Celulares</option>
                <option value="Otros">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"id="estado" name="country">name="estado" required>
           <option value="">Seleccione una opción</option>
            <option value="australia">Activo<value="Activo">Activo</option>
            <option value="usa">Inactivo<value="Inactivo">Inactivo</option>
        </select>
    
        <input type="submit" class="enviar" id="btnGuardar" value="Enviar">
        <input type="submit" class="cancelar" value="Cancelar">
    </form>
    <script src="js.js"></script>
</body>
</html>
"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{
            requeridos[i].classList.remove('input-error');
            console.log(error); 
        }
    
    }
    return error;
}

btnGuardar.addEventListener('click', validar); //Llamo al metodo validar.
.input-error{
    border: 2px solid red;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <form id="frm-agregar">
        <div class="caja">
            <label for="producto">Seleccione un producto</label>
            <select class="section-article" required id="country" name="country">
                <option value="">Seleccione una opción</option>
                <option value="Computadora">Computadora</option>
                <option value="Celulares">Celulares</option>
                <option value="Otros">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>
    <script src="js.js"></script>
</body>
</html>
"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{
            requeridos[i].classList.remove('input-error');
            console.log(error); 
        }
    
    }
    return error;
}

btnGuardar.addEventListener('click', validar); //Llamo al metodo validar.
.input-error{
    border: 2px solid red;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <form id="frm-agregar">
        <div class="caja">
            <label for="producto">Seleccione un producto</label>
            <select class="section-article" required id="country" name="country">
                <option value="">Seleccione una opción</option>
                <option value="Computadora">Computadora</option>
                <option value="Celulares">Celulares</option>
                <option value="Otros">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="estado" name="estado" required>
           <option value="">Seleccione una opción</option>
            <option value="Activo">Activo</option>
            <option value="Inactivo">Inactivo</option>
        </select>
    
        <input type="submit" class="enviar" id="btnGuardar" value="Enviar">
        <input type="submit" class="cancelar" value="Cancelar">
    </form>
    <script src="js.js"></script>
</body>
</html>
Origen Enlace

Revisando el código encontré lo siguiente:

  1. Asegúrate de tener linkeados los estilos y el script de Javascrip en el html de esta manera:

-dentro de la etiqueta < head > tener la hoja de estilos de cómo la llamaste:

<link rel="stylesheet" href="style.css">

-dentro de la etiqueta body al final después de la sección del formulario tener linkeado la hoja con el script de javascripc así:

<script src="js.js"></script>
  1. Revisa errores de sintaxis, encontré uno en la hoja de js donde escribiste mal requerido "equeridos".

El color de los input solo cambiará cuando sele de click al botón. Ahora, como estás utilizando las validaciones que por defecto trae el HTML5 con la acción required puedes optar más bien utilizar la clase de css destinada para este tipo de validaciones que ya fue mencionada en una respuesta dada a esta pregunta anteriormente ya está en ti por cual optar dependiendo de lo que estés haciendo o te estén pidiendo

Inserto de nuevo tu código con las modificaciones sugeridas.

"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{
            requeridos[i].classList.remove('input-error');
            console.log(error); 
        }
    
    }
    return error;
}

btnGuardar.addEventListener('click', validar); //Llamo al metodo validar.
.input-error{
    border: 2px solid red;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <form id="frm-agregar">
        <div class="caja">
            <label for="producto">Seleccione un producto</label>
            <select class="section-article" required id="country" name="country">
                <option value="">Seleccione una opción</option>
                <option value="Computadora">Computadora</option>
                <option value="Celulares">Celulares</option>
                <option value="Otros">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>
    <script src="js.js"></script>
</body>
</html>