Proyecto: Validar inputs

Clase 10 de 23 • Curso de Programación Funcional en JavaScript por Bedu

Nathaly Stefani Riaño Bejarano

student•

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'))

Miguel Herreros Cejas

student•

Muchas gracias por tu aporte. Llevo tiempo sin programar en Jquery y me ha sido de gran utilidad.

Ana Lilia Ortega Torres

student•

Muchas gracias :)

Diego Antonio Gomez Diaz

student•

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')
  }
}

Creck Brayan Mauri Pastor Paredes

student•

genial buen ejemplo aprendi un par de cosas con este ejemplo

LUIS EDUARDO CASTILLO GARCIA

student•

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 :)!

Javier Pérez

student•

Genial ese ejemplo iLuisCastillo, eres un crack!!

Maikol Pedroza

student•

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

Walter Sosa Tizón

student•

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

Gustavo César Ramírez Bautista

student•

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);

Jorge Méndez Ortega

student•

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");
    }
};

Noe Mikhael Huaccharaque Ruiz

student•

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

Gabriel De Andrade

student•

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

Ivan Ruiz Rosello

student•

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')
  }
} ```

Martín Gutiérrez Hernández

student•

Mi solución con métodos array

Edward Fernandez

student•

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');
  }
}

Gabriel De Andrade

student•

Hola! Está cool, pero no utilizaría let en el código pues no hay razón para usarlo y en programación funcional lo mejor es usar constantes siempre :D

Carlos Enrique Ramírez Flores

student•

Gracias y que bien que lo haces en vanilla

David Antonio Ordóñez Cornejo

student•

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)

JAIME URQUIZU

student•

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”
}

Daniel González

student•

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');
    }
  }

Fernanda Aragon

student•

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

Nicolás Arias

student•

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 Diego Prieto Rodríguez

student•

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

student•

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)

José María Cuevas Ramírez

student•

¿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 =&gt; 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. .

Proyecto: Validar inputs

Introducción al curso y conceptos base

Qué aprenderás sobre la programación funcional

Programación funcional: qué es

Boilerplate: Base para el proyecto del curso

Funciones

Funciones Algebraicas y Funciones de JavaScript

Qué son funciones puras

Proyecto: Obtener el valor de los inputs

Objetos y Tipos de Memoria en JavaScript

Copiar y modificar objetos en JavaScript

Utilizando inmutabilidad en nuestras funciones

Proyecto: Validar inputs

Estado compartido en funciones

Estado compartido o shared state

Proyecto: Agregar elementos a la lista

Composición de funciones, Closures y Currying

Funciones compuestas o Function Composition

Completando las funciones para generar etiquetas HTML

Closures en programación funcional

Currying

Proyecto: Construyendo filas y celdas

Higher Order Functions

Introducción a las Higher Order Functions

Proyecto: Actualizando el total de calorías

Proyecto: Mostrar elementos

Proyecto: Eliminar elementos

Bonus: Declarative Programming

Programación Declarativa

Conclusiones

Conclusiones