Validación de formularios con Foundation

Clase 17 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Foundation permite validar la información de formularios, con una libraria llamada Abide.

Abide nos permite añadir una respuesta gráfica para la validación de los datos en un formulario, mira cómo implementarla.

David Camacho

student•

Los formularios por defecto nos incluye una validacion estilo alert, pero es poco delicada.. Para desactivar ese tipo de validacion solo debemos agregarle el atributo novalidate al form.

Para hacer uso de Abide debemos agregarle el atributo data-abide al formulario..

Continuamos agregando el atributo required al input.

Para crear el mensaje de error que va a mostrar Abide vamos a crear un div con las mismas clases del div padre del input.

Para el ejemplo de la clase seria el:

<div class="row columns small-12 medium-6"> </div>

Es necesario que ese div lleve un display none.

Y dentro de ese div creamos una etiquetea <p></p> Con el mensaje de error. Tambien podemos agregarle iconos a esa etiqueta ejemplo:

<div class="row columns small-12 medium-6">

   <p><i class="fi-alert"></i>Correo no valido.</p>

</div>

Ya con el mensaje listo para mostrarse al usuario, debemos agregarle el atributo data-abide-error al div, para que abide sepa cual es el mensajae de eror que debe mostrarle al usuario.

Si queremos acceder a los estilos que nos da Foundation en el input cada vez que se genera un error lo hacemos a traves de la clase: .is-invalid-input:not(:focus) y ahi podemos agregarle los estilos que queremos modificar.

En mi caso cree una clase en css llamada none, donde le agregue los estilos al mensaje de error y un display none. De manera de solo incluirle al div la clase none y no el style="display: none;".

#suscribete-container .none {

 	display: none;

 	text-align: center;

 	color: white;

 	font-family: 'Bree Serif', serif;

 	font-size: 1em;

Wilfredo Bardales

student•

Muy bueno el video , pero quedaría perfecto si no taparas gran parte del codigo q estas editando

Yeison Daza

student•

Hola Will, te acuerdas en que parte cubre el código?

Dayan Betancourt

student•

Hola @yeison es en el minuto 2:42 donde se tapa el código. Saludos,

Jorge Gomez

student•

El archivo no se puede ver, ni descargar.

Yeison Daza

student•

Corregido

Blanca Segura Garcia

student•

Qué pena … No sé en donde falle … pero no me sale el “validate” de “Abide” …
Qué está mal?
<code>

<form action="" method=“POST” novalidate data-abide> <div data-abide-error class=“row columns small-12 medium-6 text-center” style=“display: none;” > <p><i class=“fi-alert”></i> Ingresó in correo electrónico no válido</p> </div> …

Blanca Segura Garcia

student•

Ja … ja … Yo misma me pregunto y yo misma me respondo 😉
Olvidé poner en el “required en el
<code>
<input class=“input-group-field” type=“email” name=“email” placeholder="tu@correo.com” required="">
</code>

Cesar David Ramírez Dimaté

student•

Esta bien que tu mismo encuentres tu error, aun más, que dejes la solución por si alguien le pasa algo similar 😉

Ivan Cardozo

student•

No logre cambiar el color de fondo de la celda de validación , puse el codigo

.is-invalid-input :not(:focus){
  background-color: rgb(236, 195, 198);
  border-color: rgb(236, 195, 198);
}```

Pero a la hora de recargar la pagina  no sucede nada

Diego Forero

Team Platzi•

Revisa la documentación de foundation, esto se hizo con una versión beta y para la versión final cambiaron varias cosas.

Cesar David Ramírez Dimaté

student•

Por eso es importante revisar desde el inspector de elementos. Aunque raro porque debería tomarlo.

Juan David lemus Rubiano

student•

para los que no le salga el error, hay que agregar unos atributos mas, y unas cclase mas y el div quedaria de esta manera

<form action="" method="" novalidate data-abide>
      <div class="row column small-12 medium-6 text-center error-container alert-callout" style="display: none;" data-abide-error>

Cesar David Ramírez Dimaté

student•

De hecho el código completo sería el siguiente:

<section id="suscribete-container">
  <h3 class="text-center">Suscríbete</h3>
  <h4 class="text-center"><small>Y recibe las últimas novedades del concierto</small></h4>
  <form action="" method="" novalidate data-abide>
    <div data-abide-error class="row columns small-12 medium-6 text-center" style="display: none;">
      <p><i class="fi-alert"></i>Ingresó un correo eletrónico no válido</p>
    </div>
    <div class="row columns small-12 medium-6">
      <div class="input-group">
        <span class="input-group-label"><i class="fi-mail"></i></span>
        <input type="email" name="email" class="input-group-field" placeholder="tu@correo.com" required>
        <div class="input-group-button">
          <input type="submit" class="button" value="Suscribirse!">
        </div>
      </div>
    </div>
  </form>
</section>

Validación de formularios con Foundation

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman