Formularios con Bootstrap

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

Resumen

Veamos como crear formularios efectivos con Bootstrap

Hector Vasquez

student•

Dejo mi código de validación de formulario, adaptado a la última versión de bootstrap. Al parecer, ya no trae la “X” y el check para campos válidos:

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
    
    <!-- Header -->
    <header id="header-container">
      <div class="container">
  
        <div class="row d-flex align-items-center justify-content-between">
          <div class="col-3">
            <h1>Platzishop</h1>
          </div>
          <div class="col-3 text-right text-md-center text-lg-left">
            <button class="navbar-toggler d-sm-none" data-toggle="collapse" data-target="#navbarSupportedContent">
              &#9776;
            </button>
            <a href="#" class="login d-none d-sm-inline text-uppercase font-weight-bold">Login</a>
          </div>
        </div>

      </div>
    </header>
    <!-- /Header -->

    <!-- Menu -->
    <nav id="menu-container" class="navbar navbar-expand-sm navbar-light d-block d-sm-flex">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto justify-content-center justify-content-lg-start text-center">
          <li class="nav-item active"><a class="nav-link" href="#">Menu</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Catálogo</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Carrito</a></li>
          <li class="nav-item"><a class="nav-link d-sm-none" href="#">Login</a></li>
        </ul>
      </div>
      <form class="form-inline my-2 d-block d-md-flex text-center">
          <div class="item-group">
            <input type="text" class="form-control d-inline-block align-top" placeholder="¿Encontró lo que buscaba?" aria-label="Search">
            <span class="item-group-btn align-top">
              <button class="btn btn-platzi" type="button"><span class="d-none d-md-inline-block">Buscar</span><i class="fa fa-search d-md-none"></i></button>
            </span>
          </div>
          <!--<input class="form-control mr-sm-2" type="search" placeholder="¿Encontró lo que buscaba?" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0 btn-platzi" type="submit">Buscar</button>-->
        </form>
        <!--<ul class="nav navbar-nav pull-xs-right">
            <li class="nav-item">
                <a class="nav-link" href="#" title="I collapse on `sm` screens">About</a>
            </li>
        </ul>-->
    </nav>
    <!-- /Menu -->

    <!-- Carousel -->
    <div id="carousel-container">
      <div id="productosCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#productosCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#productosCarousel" data-slide-to="1"></li>
          <li data-target="#productosCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="images/img1.svg" alt="Primer producto">
            <div class="carousel-caption">
              <h4>Producto 1</h4>
              <p class="d-none d-md-block">Et harum quidem rerum facilis est et expedita distinctio.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="images/img2.svg" alt="Segundo producto">
            <div class="carousel-caption">
              <h4>Producto 2</h4>
              <p class="d-none d-md-block">These cases are perfectly simple and easy to distinguish.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="images/img3.svg" alt="Tercer producto">
            <div class="carousel-caption">
              <h4>Producto 3</h4>
              <p class="d-none d-md-block">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#productosCarousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Producto anterior</span>
        </a>
        <a class="carousel-control-next" href="#productosCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Producto siguiente</span>
        </a>
      </div>
    </div>
    <!-- /Carousel -->
  
    <!-- Info -->
    <div id="info-container">
      <div class="container">
        <div class="row text-center">
          <div class="col-12 col-md-4">
            <img src="images/calidad.png" alt="Calidad" class="img-fluid" />
            <h4>Calidad</h4>
          </div>
          <div class="col-12 col-md-4">
            <img src="images/envio.png" alt="Envío" class="img-fluid" />
            <h4>Envío gratis</h4>
          </div>
          <div class="col-12 col-md-4">
            <img src="images/soporte.png" alt="Soporte" class="img-fluid" />
            <h4>Soporte 24Hs</h4>
          </div>
        </div>
      </div>
    </div>
    <!-- /Info -->
    
    <!-- Footer -->
    <footer id="footer-container">
      <div class="container">
        <div class="row text-center text-md-left">
          <div class="col-md-4">
            <form id="suscribeForm" action="#" method="POST">
              <h4 class="text-uppercase">¿Quieres recibir todas las novedades?</h4>
              <div class="form-group">
                <input class="form-control" type="email" id="email" name="email" placeholder="tu@correo.com" />
                <small class="form-text text-muted">No compartiremos tu información con nadie más</small>
              </div>
              <button type="submit" class="btn btn-primary form-text">Suscribirme</button>
            </form>
          </div>
          <div class="col-md-3 offset-md-5">
            <h4>Navegación</h4>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a href="#" class="nav-link">Home</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Catálogo</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Carrito</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Login</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">FAQ</a>
              </li>
              <li class="nav-item">
                <a href="#" class="nav-link">Contacto</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <!-- /Footer -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>

Js:

const $form = $('#suscribeForm');

const $formGroup = $form.find(".form-group");
const $formControl = $formGroup.find(".form-control");

$form.submit(function(ev){

	ev.preventDefault();
	const error = Math.random() > 0.5;

	$formGroup.removeClass().addClass('form-group');
	$formControl.removeClass().addClass('form-control');
	//$formGroup.addClass( error ? 'is-invalid' : 'is-valid' );
	$formControl.addClass( error ? 'is-invalid' : 'is-valid' );
	$formGroup.find('.invalid-feedback, .valid-feedback').remove();

	var el;
	if(error){
		el = $('<div>', { html: 'Ha ocurrido un error' });
		el.addClass('invalid-feedback');
	}else{
		el = $('<div>', { html: 'Te enviaremos todas las novedades' });
		el.addClass('valid-feedback');
	}
	
	$formGroup.append(el);
});

Juan Pablo Madril

student•

gracias por tu aporte, hasta ahora venia adaptando bien la nueva versión pero esta parte me dejo estancado

Cesar David Ramírez Dimaté

student•

Puedes dejar tu código js más limpio y funcional de la siguiente forma (para bootstrap v4.1.1).

const $form = $('#suscribeForm')
const $formGroup = $form.find('.form-group')
const $formControl = $formGroup.find('.form-control')

$form.submit(function (ev) {
  ev.preventDefault();
  const error = Math.random() > 0.5;

  $formControl.removeClass().addClass('form-control');
  $formGroup.find('.invalid-feedback, .valid-feedback').remove();
  $formControl.addClass(error ? 'is-invalid' : 'is-valid');

  var el;
  if (error) {
    el = $('<div>', {html: 'Ha ocurrido un error'});
    el.addClass('invalid-feedback');
  } else {
    el = $('<div>', {html: 'Te enviaremos todas las novedades'});
    el.addClass('valid-feedback');
  }
  $formGroup.append(el);
});

Dayan Betancourt

student•

Durante todo el curso hemos visto que para personalizar nuestros propios estilos a las diferentes secciones se utiliza id (#) en el curso de Leonidas él recomienda usar class (.) y nunca id; en bootstrap y fundation se debe hacer con id (#) por algún motivo o fue solo gusto del profesor Sacha?

Cristián Mac Donald Góngora

student•

Los ID’s, son para que reconozca el estándar de bootstrap… lo ideal para los estilos… siempre class…

Jose Andres Gonzalez Guevara

student•

Así es, class es mejor, pero la dimensión de este proyecto es muy corta, así que la reutilización de código para este caso es muy poco. Pero por buena práctica Class con alguna conventions CSS (SUIT, BEM…)

Jorge Díaz Hernández

student•

Para qué se agrega ?

const error = Math.random() > 0.5```

Cesar Aguilar fonseca

student•

Genera un número al azar y si es mayor que 0.5 se ejecuta lo que yo digo en este caso se agrega un mensaje de Success y si es menor entonce uno de Error.
Lo agregamos para simular el comportamiento de un usuario que agrega bien su correo o que lo agregue mal.

Jorge Luis Paiva Huamán

student•

Estaba buscando "Algún truco" para que en internet Explorer 10 (win10) el ev.preventDefault() si funcione (y evite el post al menos en el Formulario de suscripcion) Y me encuentro con que hay que limitar funcionalidad según navegador :-(

https://developer.mozilla.org/es/docs/Detecci%C3%B3n_del_navegador_y_cobertura_a_m%C3%BAltiples_navegadores

Iintenté con onclick="return(false)" pero anula el script :-(

Si lograron avisen... :-)

Jorge Luis Paiva Huamán

student•

por algún motivo constantes con $ y variables sin el?

Dayan Betancourt

student•

Al realizar el archivo app.js por buenas practicas no debería ir todo dentro de lo siguiente:

$(function() {
...
});

o bootstrap y fundation ya hizo eso en algún sitio y no hace falta?

Cesar David Ramírez Dimaté

student•

Por qué? el $(funct() { ... }); es definir prácticamente una función anónima. Claramente puedes definir variables y constantes sin necesidad de hacer esto.

Edicson Armando Hurtado Lozano

student•

No funciona 😦 ayuda
const $form = $(’#suscribeForm’)
const $formGroup = $form.find(’.form-group’)
const $formControl = $formGroup.find(’.form-control’)

$form.submit(function (ev) {
ev.preventDefault()

const error = Math.random() > 0.5
$formGroup.removeClass().addClass('form-group')
$formControl.removeClass().addClass('form-control')
$formGroup.addClass(error ? 'has-danger' : 'has-success')
$formControl.addClass(error ? 'form-control-danger' : 'form-control-success')
$formGroup.find('.form-control-feedback').remove()
var el;
if (error){
	el = $('<div>', { html:'Ha ocurrido un error'})    
} else {
	el = $('<div>', { html: 'Te enviaremos todas las novedades'})
}
 el.addClass('form-control-feedback')
 $formGroup.append(el)

} )

Diego Forero

Team Platzi•

Te sale algún error en la consola?

Carlos Sampol

Team Platzi•

Podrias por favor compartir el error que te sale ?

Centro Cultural Colombo Americano

student•

Porque la funcion lleva un parametro (ev) para que sirve y cual es su finalidad, si no se pone que pasa ?

Creo que esa no es la forma de correcta de validar ya que lo hace randomico y x eso falla

Usuario anónimo

user•

buenas noches, alquien me podria ayudar en explicarme para que sirve
*= y tambien para que es el $(’<div>’, { html: ‘Ha ocurrido un error’ })

MUCHAS GRACIAS

Diego Forero

Team Platzi•

el *= es una expresión regular donde le dices que busque o que haga match con cualquier valor del atributo que inicie con lo que pones luego de la expresión.

#footer-container [class*="col-"] { 
...

Va a aplicar a todas las columnas que tengan una clase que inicien con col-

La segunda parte de tu pregunta hace uso de jQuery y lo que dice básicamente es que se va a crear un elemento div que contiene el html Ha ocurrido un error.
Si cambias eso por

$('<span>', {html: 'Ha ocurrido un error'})

Va a crear un span en lugar de un div.

Espero tus dudas estén solucionadas.

Usuario anónimo

user•

buenas noches alguien me podria ayudar con este error que me sale en la consola,
Uncaught ReferenceError: $ is not defined
at VM2112 app.js:1
(anonymous) @ VM2112 app.js:1
app.js:1 Uncaught SyntaxError: Identifier ‘$form’ has already been declared
at VM2112 app.js:1

este es mi codigo:

const $form = $('#suscribeForm')
const $formGroup = $form.find('.form-group')
const $formControl = $formGroup.find('.form-control')

$form.submit(function(ev){
  
  ev.preventDefault()

	const error = Math.random() > 0.5

	$formGroup.removeClass().addClass('form-group')
	$formControl.removeClass().addClass('form-control')
	$formGroup.addClass(error ? 'has-danger' : 'has-success')
	$formControl.addClass(error ? 'form-control-danger' : 'form-control-success')
	$formGroup.find('.form-control-feedback').remove()

	var el;

	if (error){
		el = $('<div>', {html:'Ha ocurrido un error'})
	}
	else{
		el = $('<div>', {html:'Te enviaremos todas las novedades'})
	}

	el.addClass('form-control-feedback')
	$formGroup.append(el)

 })

function mostrarModal(){
	const noMostrarModal = JSON.parse(localStorage.noMostrarModal)

	if (!noMostrarModal){
		$('#modalOferta').modal()
	}

	$('#btnNoRegistrar').click(function(ev){
		localStorage.noMostrarModal = true
	})
}

Carlos Sampol

Team Platzi•

Estas seguro que estas incluyendo jQuery en tu proyecto ?
Saludos!

Cesar David Ramírez Dimaté

student•

Recuerda que al final del index.html debes tener lo siguiente:

<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper-1.14.3.min.js"></script>
<script src="js/bootstrap-4.1.1.min.js"></script>
<script src="js/app.js"></script>

fernando josé pineda trujillo

student•

yo traté de hacerlo como lo muestra el video pero no me resultó, decidí mirar la documentación y ya me muestra el js así que lo copie tal cual y me funcionó.
Para la versión actual tienes que agregar otras clases y ya te facilita el js por lo cuál te recomiendo que revises la documentación.
Saludos!

Cesar David Ramírez Dimaté

student•

A que te refieres on que te facilita el js?

fernando josé pineda trujillo

student•

Sino recuerdo mal hacía referencia a que en la documentación oficial de Bootstrap aparece el código, y lo seguí al pie. Sacha a veces recorta código y lo copia tal cual la documentación oficial. Recuerda que el curso está desactualizado y Bootstrap todavía en Beta

Formularios con Bootstrap

¡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