0

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>

2 respuestas 2

1

Estas ocupando validaciones de HTML, por lo que pefectamente puedes ocupar el selector css :invalid y no es necesario ocupar javascript

input:invalid, input:invalid:focus  {
  border: 2px solid red;
  outline-color: red;
}
<form>
  <input required  >
  <input value="algo" required  >
</form>

0

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="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>

0

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.