Proyecto: Validar inputs

Con VanillaJS:

let description = document.getElementById('description')
let calories = document.getElementById('calories')
let carbs = document.getElementById('carbs')
let protein = document.getElementById('protein')

const validateInputs = () => {
  description.value ? '' : description.classList.add('is-invalid')
  calories.value ? '' : calories.classList.add('is-invalid')
  carbs.value ? '' : carbs.classList.add('is-invalid')
  protein.value ? '' : protein.classList.add('is-invalid')

  if(description.value && calories.value && carbs.value && protein.value) {
    console.log('OK!')
  }
}

description.addEventListener('keydown', () => description.classList.remove('is-invalid'))
calories.addEventListener('keydown', () => calories.classList.remove('is-invalid'))
carbs.addEventListener('keydown', () => carbs.classList.remove('is-invalid'))
protein.addEventListener('keydown', () => protein.classList.remove('is-invalid'))

diegoagd10

Mi ejemplo:

const IS_INVALID = 'is-invalid'

const description = document.getElementById('description')
const calories = document.getElementById('calories')
const carbs = document.getElementById('carbs')
const protein = document.getElementById('protein')
const inputs = [description, calories, carbs, protein]

const isValid = elem => elem.value

const isFormValid = () =>
  isValid(description) && isValid(calories) && isValid(carbs) && isValid(protein)

const showInvalid =
  elem => isValid(elem) ? '' : elem.classList.add(IS_INVALID)

const addKeydownEvent = elem =>
  elem.addEventListener('keydown', () => elem.classList.remove(IS_INVALID))

inputs.forEach(addKeydownEvent)

const validateInputs = () => {
  inputs.forEach(showInvalid)

  if (isFormValid()) {
    console.log('OK')
  }
}

Walter Sosa Tizón

Badtante decepcionado del curso, que utilice jQuery en lugar de VanillaJS me desmotiva bastante.

iLuisCastillo

Buen video para recordar javascript puro, con frameworks o librerias actualmente el manejo es mas sencillo. Para evitar el uso de JQuery, lo he realizado de otra manera:

const $ = id => document.getElementById(id);

let formInputs = {
  description: $('description'),
  calories: $('calories'),
  carbs: $('carbs'),
  protein: $('protein'),
}

const inputEntries = Object.entries(formInputs);

const validateInputs = () => {
  inputEntries.forEach(prop => {
    if (!prop[1].value) {
      formInputs[`${prop[0]}`].classList.add('is-invalid');
    }
  });

  if(Object.values(formInputs).every(({ value }) => value)) {
    alert('All inputs are fill')
  }
}

const removeInvalidType = () => {
  inputEntries.forEach(prop => {
    prop[1].addEventListener('keypress', () => {
      formInputs[`${prop[0]}`]
        .classList
          .remove('is-invalid')
    });
  })
}

removeInvalidType();

Un saludo a la comunidad 😃!

Maikol Pedroza

Esta es mi solución con vanilla JS. Si tienen dudas porfa comenten 😄

Gustavo César Ramírez Bautista

Les comparto mi solución con typescript…

Y les dejo mi repositorio por si quieren echar un vistazo, feedback bienvenido
repositorio-gus

const form = document.getElementById('form') as HTMLFormElement;

const validateInputs = (ele: HTMLInputElement) => {
  ele.value === '' &&
    (ele.classList.add('invalid'),
    window.setTimeout(() => ele.classList.remove('invalid'), 600));
  return { id: ele.id, value: ele.value };
};

const listener = (e: Event) => {
  e.preventDefault();
  const element = e.target as HTMLFormElement;
  const arr = Object.values(element).map(validateInputs).slice(0, 4);
  const flag = arr.every((ele) => ele.value !== '');

  if (flag) {
    console.log('OK');
    console.log(arr);
  }
};

form.addEventListener('submit', listener);

Gabriel De Andrade

El operador ternario también funciona en el último if y se escribiría de la siguiente manera

$description.value && $calories.value && $carbs.value && $proteins.value && console.log('works')

Aunque cabe destacar que es un poco confuso si no se tiene el else por que es el mismo símbolo que la concatenación de condiciones

ivanruiz__

Espero que mi código sirva! Si es así hacédmelo saber y seguiré publicándolo 😃

const description = $('#description');
const carbs = $('#carbs');
const calories = $('#calories');
const protein = $('#protein');


removeIsInvalidOnKeyPress = (...inputs) => {
  for(let input of inputs) {
    input.keypress(() => {
        input.removeClass('is-invalid');
    })
  }
}

removeIsInvalidOnKeyPress(description, carbs, calories, protein);

const isInputValid = input => {
  const inputValue = input.val();
  
  if(!inputValue) input.addClass('is-invalid');

  return Boolean(inputValue);
}

const inputsAreValid = (...inputs) => {
  return !inputs
    .map(input => isInputValid(input))
    .includes(false) 
}

const validateInputs = () => {
  if(inputsAreValid(description, carbs, calories, protein)) {
    alert('OK')
  }
} ```

Edward Fernández

Hola chicos, les dejo mi código:

const compose = (...functions) => data =>
  functions.reduceRight((value, func) => func(value), data)

let description = document.getElementById('description');
let calories = document.getElementById('calories');
let carbs = document.getElementById('carbs');
let protein = document.getElementById('protein');

description.onkeypress = () => {
  description.classList.remove('is-invalid');
};

calories.onkeypress = () => {
  calories.classList.remove('is-invalid');
}

carbs.onkeypress = () => {
  carbs.classList.remove('is-invalid');
}

protein.onkeypress = () => {
  protein.classList.remove('is-invalid');
}

const validateInputs = () => {
  description.value ? '' : description.classList.add('is-invalid');
  calories.value ? '' : calories.classList.add('is-invalid');
  carbs.value ? '' : carbs.classList.add('is-invalid');
  protein.value ? '' : protein.classList.add('is-invalid');

  if (description.value && calories.value && carbs.value && protein.value) {
    console.log('ok');
  }
}

noemk2

para Vanilla: classList.add()
para Jquery: addClass()

David Antonio Ordóñez Cornejo

Intentando ser muy funcional:

const compose = (...functions) => data => functions.reduceRight((value, func) => func(value), data)

let $description = document.querySelector('#description')
let $calories = document.querySelector('#calories')
let $carbs = document.querySelector('#carbs')
let $proteins = document.querySelector('#proteins')
let $addButton = document.querySelector('#add-button')

var trackInput = ($input) => {
  setTimeout(() => {
    $input.value !== '' ? $input.classList.remove('is-invalid') : $input.classList.add('is-invalid')
  }, 200)
}

$description.addEventListener('keypress', trackInput.bind(null, $description))
$calories.addEventListener('keypress', trackInput.bind(null, $calories))
$carbs.addEventListener('keypress', trackInput.bind(null, $carbs))
$proteins.addEventListener('keypress', trackInput.bind(null, $proteins))

const validateInputs = ($inputs) => $inputs.forEach(trackInput)
const validateForm = validateInputs.bind(null, [$description, $calories, $carbs, $proteins])
const processInputs = ($inputs, calllback) => {
  const flag = $inputs.every($input => $input.value !== '')
  flag === true ? $inputs.forEach($input => { console.log($input.value) }) : console.log('Skipping')
}

const processForm = processInputs.bind(null, [$description, $calories, $carbs, $proteins], console.log)
const manageCaloriesForm = compose(validateForm, processForm)
$addButton.addEventListener('click', manageCaloriesForm)

onlinejaime

Mi aportación, con bonito efecto UX:

Primero, poned como id del h1 ‘counter’:

<div class=“card-header”>
<h1 id=“counter”>Calories Counter</h1>
</div>

Segundo:

let description = $(’#description’) // id’s de los inputs
let calories = $(’#calories’)
let carbs = $(’#carbs’)
let protein = $(’#protein’)

calories.keypress(() =>{
calories.removeClass(‘is-invalid’)
counter.innerHTML=counter.innerHTML==“Por favor, inserta datos”?“Calories Counter”:“Calories Counter”
})

carbs.keypress(() =>{
carbs.removeClass(‘is-invalid’)
counter.innerHTML=counter.innerHTML==“Por favor, inserta datos”?“Calories Counter”:“Calories Counter”
})

description.keypress(() =>{
description.removeClass(‘is-invalid’)
counter.innerHTML=counter.innerHTML==“Por favor, inserta datos”?“Calories Counter”:“Calories Counter”
})

protein.keypress(() =>{
protein.removeClass(‘is-invalid’)
counter.innerHTML=counter.innerHTML==“Por favor, inserta datos”?“Calories Counter”:“Calories Counter”
})

const validateInputs = () => {
description.val() ? ‘’ : description.addClass(‘is-invalid’)
calories.val() ? ‘’ : calories.addClass(‘is-invalid’)
carbs.val() ? ‘’ : carbs.addClass(‘is-invalid’)
protein.val() ? ‘’ : protein.addClass(‘is-invalid’)
description.val() ? ‘’ : counter.innerHTML=counter.innerHTML==“Calories Counter”?“Por favor, inserta datos”:"Por favor, inserta datos"
calories.val() ? ‘’ : counter.innerHTML=counter.innerHTML==“Calories Counter”?“Por favor, inserta datos”:"Por favor, inserta datos"
carbs.val() ? ‘’ : counter.innerHTML=counter.innerHTML==“Calories Counter”?“Por favor, inserta datos”:"Por favor, inserta datos"
protein.val() ? ‘’ : counter.innerHTML=counter.innerHTML==“Calories Counter”?“Por favor, inserta datos”:“Por favor, inserta datos”
}

devdanielgo

No esta más decir que el callback, reultado de evento de escribir dentro de un input devuleve this en el caso de jQuery y event en el caso de Vanilla, por lo que no es necesario volver a escribir el nombre del input para quitarle la clase:

const compose = (...functions) => data =>
  functions.reduceRight((value, func) => func(value), data)

  let $description = $('#description');
  let $carbs = $('#carbs');
  let $calories = $('#calories');
  let $protein = $('#protein');


  $description.bind('input', function(){
    $(this).removeClass('is-invalid');
  })

  $carbs.bind('input', function(){
    $(this).removeClass('is-invalid');
  })

  $calories.bind('input', function(){
    $(this).removeClass('is-invalid');
  })

  $protein.bind('input', function(){
    $(this).removeClass('is-invalid');
  })

  const  validateInputs = () => {
    $description.val() ? '': $description.addClass('is-invalid');
    $carbs.val() ? '': $carbs.addClass('is-invalid');
    $calories.val() ? '': $calories.addClass('is-invalid');
    $protein.val() ? '': $protein.addClass('is-invalid');

    if($description.val() && $carbs.val() && $calories.val() && $protein.val()){
      console.log('ok');
    }
  }

aragonesteban

Platzi Team

Podemos reducir los keypress removiendo los corchetes de cada arrow function 😊

Nicolás Arias

También en lugar de usar el operador ternario para añadir las clases podemos usar el operador &&, de la siguiente forma:

description.val() && description.addClass('is-invalid')

El operador and solo ejecuta lo que está después únicamente si la primera expresión da un Truthy.

juan-p-code

Mi aporte 😃

let validaInput = document.querySelector('.mb-2').addEventListener('click', () => {
  let description = document.getElementById('description');
  let calories = document.getElementById('calories');
  let carbs = document.getElementById('carbs');
  let protein = document.getElementById('protein');

  description.value ? '' : description.classList.add('is-invalid'), description.classList.add('is-valid');
  calories.value ? '' : calories.classList.add('is-invalid'), calories.classList.add('is-valid');
  carbs.value ? '' : carbs.classList.add('is-invalid'), carbs.classList.add('is-valid');
  protein.value ? '' : protein.classList.add('is-invalid'), protein.classList.add('is-valid');

  description.addEventListener('keypress', () => { description.classList.remove('is-invalid');});
  calories.addEventListener('click', () => { description.classList.remove('is-invalid');});
  carbs.addEventListener('click', () => { carbs.classList.remove('is-invalid');});
  protein.addEventListener('click', () => { protein.classList.remove('is-invalid');});

  if(description.value  && calories.value && carbs.value && protein.value) {
    console.log('ok');
  }

});```

David Antonio Ordóñez Cornejo

Mi aporte:

const compose = (...functions) => data =>
  functions.reduceRight((value, func) => func(value), data)

  // DOM elements
let $description = document.querySelector('#description')
let $calories = document.querySelector('#calories')
let $carbs = document.querySelector('#carbs')
let $proteins = document.querySelector('#proteins')
let $addButton = document.querySelector('#add-button')

// Update an input field depending of input value
var trackInput = ($input) => {
  setTimeout(() => {
    if ($input.value !== '') {
      $input.classList.remove('is-invalid')
    }
  }, 250)
}

// Add handlers to validate keypresses
$description.addEventListener('keypress', trackInput.bind(null, $description))
$calories.addEventListener('keypress', trackInput.bind(null, $calories))
$carbs.addEventListener('keypress', trackInput.bind(null, $carbs))
$proteins.addEventListener('keypress', trackInput.bind(null, $proteins))

// Validate a list of input fields
const validateInputs = ($inputs) => {
  $inputs.forEach($input => {
    if ($input.value === '') {
      $input.classList.add('is-invalid')
    } else {
      $input.classList.remove('is-invalid')
    }
  })
}

// Bind inputs before to make the function point free
const validateForm = validateInputs.bind(null, [$description, $calories, $carbs, $proteins])

// Process the inputs
const processInputs = ($inputs, calllback) => {
  const flag = $inputs.every($input => $input.value !== '')
  if (flag === true) {
    $inputs.forEach($input => { console.log($input.value) })
  }
}

// Bind inputs before to make the function point free
const processForm = processInputs.bind(null, [$description, $calories, $carbs, $proteins], console.log)

// Compose validateForm and ProcessForm in one general event handler
const manageCaloriesForm = compose(validateForm, processForm)

// Add the composed handler to validate and process the form
$addButton.addEventListener('click', manageCaloriesForm)

Jorge Méndez Ortega

Para todos los que no queremos utilizar jQuery podrias intentar generar la practica usando JS puro también conocido como VanillaJS, les comparto el ejemplo que estoy realizando sin utilizar jQuery se que varios están haciendo lo mismo.

const compose = (...functions) => data =>
    functions.reduceRight((value, func) => func(value), data)

// Se utiliza $ para identificar que una variable o constante hace referencia 
// a elementos del DOM
const $DESCRIPTION = document.getElementById("description");
const $CALORIAS = document.getElementById("calorias");
const $CARBOIDRATOS = document.getElementById("carboidratos");
const $PROTEINAS = document.getElementById("proteinas");
const ERROR_CLASS = "is-invalid";

// Asignacion de evntos siempre que se desea asignar un evento aun elemento del DOM
// es necesario utilizar addEventListener
$DESCRIPTION.addEventListener("keypress", () => $DESCRIPTION.classList.remove(ERROR_CLASS));
$CALORIAS.addEventListener("keypress", () => $CALORIAS.classList.remove(ERROR_CLASS));
$CARBOIDRATOS.addEventListener("keypress", () => $CARBOIDRATOS.classList.remove(ERROR_CLASS));
$PROTEINAS.addEventListener("keypress", () => $PROTEINAS.classList.remove(ERROR_CLASS));

// funcion para validar los inputs
const validateInputs = () => {
    // Por cuestion de buenas practicas el resultado de una condición
    // Ternaria tiene que ser asignada a una variable o constante
    const DESCRIPTION_CLASS = (($DESCRIPTION.value) ? "" : ERROR_CLASS);
    $DESCRIPTION.classList.add(DESCRIPTION_CLASS);

    const CALORIAS_CLASS = (($CALORIAS.value) ? "" : ERROR_CLASS);
    $CALORIAS.classList.add(CALORIAS_CLASS);

    const CARBOIDRATOS_CLASS = (($CARBOIDRATOS.value) ? "" : ERROR_CLASS);
    $CARBOIDRATOS.classList.add(CARBOIDRATOS_CLASS);

    const PROTEINAS_CLASS = (($PROTEINAS.value) ? "" : ERROR_CLASS);
    $PROTEINAS.classList.add(PROTEINAS_CLASS);

    if ($DESCRIPTION.value && $CALORIAS.value && $CARBOIDRATOS.value && $PROTEINAS.value) {
        console.log("Oki Doki");
    }
};

José María Cuevas Ramírez

¿Qué tal comunidad? Les dejo mi implementación para quitar la clase “is-invalid”
.
Lo que hice fue colocar un id al elemento padre en común de los 4 inputs, a este le puse al eventListener y mediante event bubbling puedo obtener cual de todos los elementos fue activado para así quitar la clase.
.
De este modo solo estoy agrando 1 eventListener en lugar de 4

const $inputsRow = document.querySelector('#inputs-row')
$inputsRow.addEventListener('keypress', event => event.target.classList.remove('is-invalid'))

.
Una ventaja es que de este modo si después fuéramos a agregar o quitar inputs no habría necesidad de modificar el código de JS.
.

😃

Achraf Mharmel

hace un mes

Pueden añadir un eventListener sobre los inputs para escuchar cambios, en cuanto haya un cambio comprobar si el input.value esta vacio o no y devolver la clase invalid o remove tal clase.

José Alberto Ramírez Quiroz

hace 3 meses

Agrego codigo en Vanilla Js

const compose = (...functions) => data =>
  functions.reduceRight((value, func) => func(value), data)

//Values
let $description = document.getElementById("description"),
      $calories = document.getElementById("calories"),
      $carbs = document.getElementById("carbs"),
      $protein = document.getElementById("protein");


function emptyValue(){
  $description.value=='' ?  
  $description.style.setProperty("border","solid .1px red"):''

  $calories.value=='' ?  
  $calories.style.setProperty("border","solid .1px red"):''

  $carbs.value=='' ?  
  $carbs.style.setProperty("border","solid .1px red"):''

  $protein.value=='' ?  
  $protein.style.setProperty("border","solid .1px red"):''

  if($calories.value && $carbs.value && $description.value && $protein.value !== ''){
    console.log("OK")
  }
}



const btnAdd = document.getElementById('btnAdd');
btnAdd.addEventListener("click", emptyValue)


$description.addEventListener('input', ()=> $description.style.setProperty("border",""))
$calories.addEventListener('input',()=> $calories.style.setProperty("border",""))
$carbs.addEventListener('input',()=>  $carbs.style.setProperty("border",""))
$protein.addEventListener('input',()=>  $protein.style.setProperty("border",""))

Miguel Angel Oviedo Rodriguez

hace 8 meses

const compose = (...functions) => data =>
  functions.reduceRight((value, func) => func(value), data);

let description = document.getElementById('description');
let calories = document.getElementById('calories');
let carbs = document.getElementById('carbs');
let proteins = document.getElementById('proteins');
let addItem = document.getElementById('addItem'); // Agregé un id en button

const inputs = [description, calories, proteins, carbs];

loadEventListeners();

function loadEventListeners() {
  document.addEventListener('keyup', checkEmptyInput);
  addItem.addEventListener('click', validateInputs);
}

function checkEmptyInput() {
  inputs.forEach(item => {
    if (item.value && item.classList.contains('is-invalid')) {
      item.classList.remove('is-invalid');
    }
  });
}

function validateInputs() {
  inputs.forEach(item => {
    item.value ? '' : item.classList.add('is-invalid');
  });
}

Ulises Gonzalez

hace 9 meses

MI forma de validar de forma individual

Vista
Con el atributo input llava a la funcion “validateInput()” y le pasa su elemento como atributo con “this”

<input type="text" class="form-control mb-2 mr-sm-2" 
id="description" placeholder="Description" oninput="validateInput(this)">

<input type="number" min="0" class="form-control mb-2 mr-sm-2"
id="calories" placeholder="Calories" oninput="validateInput(this)">

<input type="number" min="0" class="form-control mb-2 mr-sm-2"
id="carbs" placeholder="Carbs" oninput="validateInput(this)">

<input type="number" min="0" class="form-control mb-2 mr-sm-2"
id="protein" placeholder="Protein" oninput="validateInput(this)">

<button class="btn btn-primary mb-2"
onclick="validateInputs()">
  <i class="fas fa-plus"></i>
</button>

Javascript

const description = document.querySelector('#description')
const calories    = document.querySelector('#calories')
const carbs       = document.querySelector('#carbs')
const protein     = document.querySelector('#protein')

validateInput = (input) => input.value === '' ? input.classList.add('is-invalid') : input.classList.remove('is-invalid') 

const validateInputs = () => {
  description.value === '' && description.classList.add('is-invalid') 
  calories.value    === '' && calories.classList.add('is-invalid')
  carbs.value       === '' && carbs.classList.add('is-invalid')
  protein.value     === '' && protein.classList.add('is-invalid')

  if(
    description.value !== '' &&
    calories.value    !== '' &&
    carbs.value       !== '' &&
    protein.value     !== ''
  ) {
    console.log('Ok')
  }
}

Osvaldo Arzate Santiago

hace 10 meses

const inputDescription = document.querySelector('#description')
const inputCalories = document.querySelector('#calories')
const inputCarbs = document.querySelector('#carbs')
const inputProtein = document.querySelector('#protein')

const inputs = [inputCalories, inputCarbs, inputDescription, inputProtein]

const validateInputs = () => {
	inputs.map((input) => (input.value ? '' : input.classList.add('is-invalid')))

	if (
		inputCalories.value &&
		inputDescription.value &&
		inputProtein.value &&
		inputCarbs.value
	) {
		console.log('Guardado')
	}
}

inputs.map((input) =>
	input.addEventListener('keypress', () => {
		input.classList.remove('is-invalid')
	})
)

Abraham José Alvarenga Javier

Comparto mi solución, si ven mejoras por favor comentenme 😄
#SinJQueryPapa

const { description, calories, carbs, protein } = document.getElementsByTagName("input");

const validateInputs = () => {
  const validClass = "is-valid";
  const invalidClass = "is-invalid";

  description.value == ""
    ? changeClass(description, invalidClass, validClass)
    : changeClass(description, validClass, invalidClass);

  calories.value == ""
    ? changeClass(calories, invalidClass, validClass)
    : changeClass(calories, validClass, invalidClass);

  carbs.value == ""
    ? changeClass(carbs, invalidClass, validClass)
    : changeClass(carbs, validClass, invalidClass);

  protein.value == ""
    ? changeClass(protein, invalidClass, validClass)
    : changeClass(protein, validClass, invalidClass);
};

const changeClass = (element, newClass, previousClass) => {
  element.classList.add(newClass);
  element.classList.remove(previousClass);
};
const btn = document.getElementById("add");

btn.addEventListener("click", validateInputs);

Luis González

Otra forma de realizar la validación es poner &&, esto nos permite ahorranos el else cuando solo queremos que haya una sola validación, asi no colocamos que cuando no se cumpla vaya vacio.

const validForm = () => {
  !description.val() && description.addClass("is-invalid");
  !calories.val() && calories.addClass("is-invalid");
  !carbs.val() && carbs.addClass("is-invalid");
  !protein.val() && protein.addClass("is-invalid");

  if (
    description.val() &&
    calories.val() &&
    carbs.val() &&
    protein.val()
  ) {
    console.log("ok")
  }

Walter Sosa Tizón

Bastante decepcionado del curso, que utilice jQuery en lugar de VanillaJS d

nodezi

let inputs = document.getElementsByTagName(‘input’)
let btn = document.getElementById(‘btn’)
let con = 0

let validInput = () => {
con = 0
for (let input of inputs) {
input.addEventListener(“keypress”,validKeyPress)
addClassInvalid(input)
}

if(con == 4){
     console.log("todo esta ok")
}else{
     console.log("algo esta mal")
}

}

let validKeyPress = (e) => {
e.target.classList.remove(‘is-invalid’)
}

let addClassInvalid = (input) => {
if(input.value == “”){
input.classList.add(“is-invalid”)
con–
}else{
con++
input.classList.remove(“is-invalid”)
}
}

btn.addEventListener(‘click’,validInput)

Alejandro Saucedo Ramírez

const compose = (...functions) => data =>
  functions.reduceRight((value, func) => func(value), data)


description.onkeypress = () => {
  description.classList.remove('is-invalid');
}

carbs.onkeypress = () => {
  carbs.classList.remove('is-invalid');
}

calories.onkeypress = () => {
  calories.classList.remove('is-invalid');
}

protein.onkeypress = () => {
  protein.classList.remove('is-invalid');
}

const validateInputs = () => {
  description.value ? '' : description.classList.add('is-invalid');
  carbs.value ? '' : carbs.classList.add('is-invalid');
  calories.value ? '' : calories.classList.add('is-invalid');
  protein.value ? '' : protein.classList.add('is-invalid');

  if (description.value && carbs.value && calories.value && protein.value) {
    console.log('OK');
  }
}

David Franco

const compose = (...functions) => data =>
    functions.reduceRight((value, func) => func(value), data)

const description = document.getElementById("description");
const calories = document.getElementById("calories");
const carbs = document.getElementById("carbs");
const protein = document.getElementById("protein");

description.addEventListener('keypress', () => {
    description.classList.remove('is-invalid')
})
calories.addEventListener('keypress', () => {
    calories.classList.remove('is-invalid')
})
carbs.addEventListener('keypress', () => {
    carbs.classList.remove('is-invalid')
})
protein.addEventListener('keypress', () => {
    protein.classList.remove('is-invalid')
})

const validateInputs = () => {

    description.value ? '' : description.classList.add('is-invalid'), description.classList.add('is-valid')
    calories.value ? '' : calories.classList.add('is-invalid'), calories.classList.add('is-valid')
    carbs.value ? '' : carbs.classList.add('is-invalid'), carbs.classList.add('is-valid')
    protein.value ? '' : protein.classList.add('is-invalid'), protein.classList.add('is-valid')

    if (description.value && calories.value && carbs.value && protein.value) {
        console.log('ok');
    }
}

<code>

Uriel Mojica Mejía

No me funcionó addClass, así que tuve que usar .classList.add(‘is-invalid’): Dejo el código por si alguien mas tiene el problema

Flavio Moises Salinas Cari

queda mejor, para mi.

description.val() && description.addClass(‘is-invalid’);

Uriel Mojica Mejía

Les comparto también otra forma de validar los campos, dónde el Botón de enviar o agregar está desactivado hasta que todos los campos estén llenos, todo con JavaScript Vanilla

LeoCode0

Hice una sola clase que remueva la clase según el id

const removeClass = (id) => {
  id.classList.remove('is-invalid')
}

y con onkeypress en cada input de esta forma

<input type="text" class="form-control mb-2 mr-sm-2" id="description" placeholder="Description" onkeypress="removeClass(description)">

<input type="number" min="0" class="form-control mb-2 mr-sm-2" id="calories"  placeholder="Calories" onkeypress="removeClass(calories)">

<input type="number" min="0" class="form-control mb-2 mr-sm-2" id="carbs" placeholder="Carbs" onkeypress="removeClass(carbs)">

<input type="number" min="0" class="form-control mb-2 mr-sm-2" id="protein" placeholder="Protein" onkeypress="removeClass(protein)">

Manuel Rivera

const $ButtonClick = document.getElementById('ButtonClick');

const ClassError = 'is-invalid';

// Campos
const $description = document.querySelector('#description');
const $calories = document.querySelector('#calories');
const $carbs = document.querySelector('#carbs');
const $protein = document.querySelector('#protein');

// onClick
$ButtonClick.onclick = validationInputs;

$description.onkeypress = () => $description.classList.remove(ClassError);
$calories.onkeypress = () => $calories.classList.remove(ClassError);
$carbs.onkeypress = () => $carbs.classList.remove(ClassError);
$protein.onkeypress = () => $protein.classList.remove(ClassError);

// function validate campos
function validationInputs () {
  $description.value.trim() === '' && $description.classList.add(ClassError);
  $calories.value.trim() === '' && $calories.classList.add(ClassError);
  $carbs.value.trim() === '' && $carbs.classList.add(ClassError);
  $protein.value.trim() === '' && $protein.classList.add(ClassError);

  if ($description.value.trim() !== '' && $calories.value.trim() !== '' && $carbs.value.trim() !== '' && $protein.value.trim() !== '') {
    console.log('ok');
  };
};

jakson-duvan-zambrano

const compose = (...functions) => data =>
  functions.reduceRight((value, func) => func(value), data)

const ButtonClick = document.getElementById('ButtonClick')
const description = document.getElementById('description')
const calories = document.getElementById('calories')
const carbs = document.getElementById('carbs')
const protein = document.getElementById('protein')


description.onkeypress = () => description.classList.remove('is-invalid')

calories.onkeypress = () => calories.classList.remove('is-invalid')

carbs.onkeypress = () => carbs.classList.remove('is-invalid')

protein.onkeypress = () => protein.classList.remove('is-invalid')

const validateInput = () => {
  description.value === '' && description.classList.add('is-invalid')
  calories.value === '' && calories.classList.add('is-invalid')
  carbs.value === '' && carbs.classList.add('is-invalid')
  protein.value === '' && protein.classList.add('is-invalid')


  if(description.value !== '' && calories.value !== '' && carbs.value !== '' && protein.value !== ''){
    console.log('Ok')
  }

}

ButtonClick.onclick = validateInput

Francisco Garcia [C6]

Excelente

Byron Mesias Cueva Cabrera

Yo lo hice asi:

let description = document.querySelector('#description');
let carbs = document.querySelector('#carbs');
let calories = document.querySelector('#calories');
let protein = document.querySelector('#protein');

const handleKeyPress = function () {
  this.classList.remove('is-invalid')
}

description.addEventListener('keypress', handleKeyPress)
carbs.addEventListener('keypress', handleKeyPress)
calories.addEventListener('keypress', handleKeyPress)
protein.addEventListener('keypress', handleKeyPress)

const validateInputs = () => {
  !description.value && description.classList.add('is-invalid')
  !calories.value && calories.classList.add('is-invalid')
  !carbs.value && carbs.classList.add('is-invalid')
  !protein.value && protein.classList.add('is-invalid')

  if (description.value && calories.value && carbs.value && protein.value) {
    console.log('Ok')
  }
}

Elvis Saavedra

Aquí va mi código en vanilla

const $ = (id) => document.getElementById(id);

let formInputs = {
  description: $('description'),
  calories: $('calories'),
  carbs: $('carbs'),
  protein: $('protein'),
};

const init = () => {
  Object.keys(formInputs).forEach((key) => {
    formInputs[key].addEventListener('change', keyPress);
  });
};

const validateInputs = () => {
  let errors = 0;
  Object.keys(formInputs).forEach((key) => {
    if (!formInputs[key].value) {
      errors += 1;
      formInputs[key].classList.add('is-invalid')
    }
  });
  if (!errors) {
    console.log('ok');
  }
};

const keyPress = ({ target }) => {
  target.value ? target.classList.remove('is-invalid') : '';
};

diego rodriguez

Otra forma en vez de repetir tanto código y practicar con métodos de arrays es al momento de añadir el item usar el método every que devuelve tru o false si todos los elementos del array cumplen con la función

César Alejandro Garay Aguilar

Este es mi aporte hecho con Vanilla JS:

const log = console.log
const id = document.getElementById.bind(document)

const $description = id(‘description’)
const $carbs = id(‘carbs’)
const $calories = id(‘calories’)
const $protein = id(‘protein’)
const $btnAdd = id(‘btnAdd’)

//Creamos funcion para remover las clases
const removeClass = $element => {
$element.addEventListener(‘keypress’, () =>
$element.classList.remove(‘is-invalid’)
)
}

//
$btnAdd.addEventListener(‘click’, () => {
$description.value === ‘’ && $description.classList.add(‘is-invalid’)
$carbs.value === ‘’ && $carbs.classList.add(‘is-invalid’)
$calories.value === ‘’ && $calories.classList.add(‘is-invalid’)
$protein.value === ‘’ && $protein.classList.add(‘is-invalid’)

if ($description.value && $calories.value && $carbs.value && $protein.value) {
log(‘OK!’)
}
})

removeClass($description)
removeClass($carbs)
removeClass($calories)
removeClass($protein)

Alessandri Fonseca

mi solución con JS vanilla

const isEmpty = input => input.value == ''

const showInvalid = elem => {
    elem.classList.add("is-danger")
}

const removeInvalid = elem => {
    elem.classList.remove("is-danger")
}

const addKeydownReset = elem => {
    elem.addEventListener('keydown', ()=> {
        removeInvalid(elem)
    })
}

const validateInputs = (inputs) => {
    let isValidated = true;
    inputs.forEach(input => {
       if(isEmpty(input)){
        showInvalid(input) 
        isValidated = false
       } 
    });
    if(isValidated){
        console.log("Ok")
    }
}

document.querySelector('button').addEventListener('click', () => {
    let description = document.querySelector('#description');
    let calories = document.querySelector('#calories');
    let carbs = document.querySelector('#carbs');
    let protein = document.querySelector('#protein');
    const inputs = [description, calories, carbs, protein]
    
    validateInputs(inputs);
    inputs.forEach(elem =>{
        addKeydownReset(elem)
    })
})

Manuel De Jesús Salcedo Anaya

const description = $("#description");
const calories = $("#calories");
const carbs = $("#carbs");
const proteins = $("#proteins");

const validateInputs = () => { 
    validateInput(description);
    validateInput(calories);
    validateInput(carbs);
    validateInput(proteins);
};

const validateInput = (value) => {
    if (value && value.val() && value.val().trim()) {   
        value.removeClass("is-invalid");
    }
    else {
        value.addClass("is-invalid");
    }
};

RetaxMaster

Profe Platzi