Bienvenido a la Comunidad de Treehouse
¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.
¿Buscas aprender algo nuevo?
Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de
Inicia tu prueba gratuita
Rye Zhu
6,273 Puntos¿Los mensajes de validación no funcionan correctamente?
¡Hola! Entonces mis mensajes de retroalimentación de validación no funcionan correctamente.
Aquí está mi código:
<div class=modal fade id=exampleModal tabindex=-1 role=dialog aria-labelledby=exampleModalLabel aria-hidden=verdadero>
<div class=modal-dialog modal-lg role=document>
<div class=modal-content>
<div class=modal-header bg-success text-white>
<h5 class=modal-title id=exampleModalLabel>Regístrate para Full Stack Conf</h5>
<botón type=button class=close data-dismiss=modal aria-label=Close>
<span aria-hidden=verdadero>×</span>
</botón>
</div>
<div class=modal-body>
<!-- registro -->
<form class=needs-validation novalidate>
<div class=alert alert-warning alert-dismissible fade show role=alert>
<strong>¡Date prisa!</strong> El registro anticipado finaliza en 2 días.
<botón type=button class=close data-dismiss=alert aria-label=Close>
<span aria-hidden=verdadero>×</span>
</botón>
</div>
<h5 class=mb-4>Acerca de ti</h5>
<div class=form-row>
<div class=form-group col-md-6>
<etiqueta para=nombre>Nombre</etiqueta>
<input type=text class=form-control id=nombre requerido>
<div class=invalid-feedback>
Requerido.
</div>
<div class=valid-feedback>
¡Se ve bien!
</div>
</div>
<div class=form-group col-md-6>
<etiqueta para=email>Correo electrónico</etiqueta>
<input type=email class=form-control id=email requerido>
<div class=invalid-feedback>
Requerido.
</div>
<div class=valid-feedback>
¡Se ve bien!
</div>
</div>
</div>
<div class=form-group>
<etiqueta para=role>Rol:</etiqueta>
<select class=form-control custom-select id=role>
<option valor=desarrollador full stack js>Desarrollador Full Stack JavaScript</option>
<option valor=desarrollador front end>Desarrollador Front End</option>
<option valor=desarrollador back end>Desarrollador Back End</option>
<option valor=diseñador>Diseñador</option>
<option valor=estudiante>Estudiante</option>
</select>
</div>
<hr class=my-4>
<h5 class=mb-4>Selecciona todos los temas que te interesen:</h5>
<div class=verificación de formulario>
<div class=custom-control custom-checkbox>
<input type=checkbox class=form-check-input id=javascript-frameworks>
<etiqueta class=form-check-label para=javascript-frameworks>Marcos de Javascript</etiqueta>
</div>
</div>
<div class=verificación de formulario>
<div class=custom-control custom-checkbox>
<input type=checkbox class=form-check-input id=javascript-libraries>
<etiqueta class=form-check-label para=javascript-libraries>Librerías de Javascript</etiqueta>
</div>
</div>
<div class=verificación de formulario>
<div class=custom-control custom-checkbox>
<input type=checkbox class=form-check-input id=node.js>
<etiqueta class=form-check-label para=node.js>Node.js</etiqueta>
</div>
</div>
<div class=verificación de formulario>
<div class=custom-control custom-checkbox>
<input type=checkbox class=form-check-input id=buildtools>
<etiqueta class=form-check-label para=buildtools>Herramientas de compilación</etiqueta>
</div>
</div>
<div class=verificación de formulario>
<div class=custom-control custom-checkbox>
<input type=checkbox class=form-check-input id=es2015>
<etiqueta class=form-check-label para=es2015>ES2015</etiqueta>
</div>
</div>
<hr class=my-4>
<h5 class=mb-4>Pago</h5>
<div class=form-row>
<div class=col-lg-6 form-group>
<etiqueta para=cc-num>Número de tarjeta:</etiqueta>
<input class=form-control id=cc-num type=text requerido>
<div class=invalid-feedback>
Requerido.
</div>
<div class=valid-feedback>
¡Se ve bien!
</div>
</div>
<div class=col-lg form-group>
<etiqueta para=zip>Código postal:</etiqueta>
<input class=form-control id=zip type=text requerido>
<div class=invalid-feedback>
Requerido.
</div>
<div class=valid-feedback>
¡Se ve bien!
</div>
</div>
<div class=col-lg form-group>
<etiqueta para=cvv>CVV:</etiqueta>
<input class=form-control id=cvv type=text requerido>
<div class=invalid-feedback>
Requerido.
</div>
<div class=valid-feedback>
¡Se ve bien!
</div>
</div>
</div>
<etiqueta>Fecha de vencimiento:</etiqueta>
<div class=form-row>
<div class=form-group col-lg-3>
<select class=custom-select form-control id=exp-month requerido>
<option valor=1>1 - Enero</option>
<option valor=2>2 - Febrero</option>
<option valor=3>3 - Marzo</option>
<option valor=4>4 - Abril</option>
<option valor=5>5 - Mayo</option>
<option valor=6>6 - Junio</option>
<option valor=7>7 - Julio</option>
<option valor=8>8 - Agosto</option>
<option valor=9>9 - Septiembre</option>
<option valor=10>10 - Octubre</option>
<option valor=11>11 - Noviembre</option>
<option valor=12>12 - Diciembre</option>
</select>
<div class=invalid-feedback>
Requerido.
</div>
<div class=valid-feedback>
¡Se ve bien!
</div>
</div>
<div class=form-group col-lg-3>
<select class=custom-select form-control id=exp-year requerido>
<option valor=2016>2016</option>
<option valor=2017>2017</option>
<option valor=2018>2018</option>
<option valor=2019>2019</option>
<option valor=2020>2020</option>
</select>
<div class=invalid-feedback>
Requerido.
</div>
<div class=valid-feedback>
¡Se ve bien!
</div>
</div>
</div>
<hr class=mb-4>
<botón type=submit class=btn btn-success btn-md>Registrarse</botón>
</form>
<script>
// Ejemplo de JavaScript de inicio para deshabilitar envíos de formularios si hay campos inválidos
(función() {
'use strict';
window.addEventListener('load', función() {
// Obtén todos los formularios a los que queremos aplicar estilos de validación personalizados de Bootstrap
var forms = documento.getElementsByClassName('needs-validation');
// Recórrelos y evita el envío
var validation = Array.prototype.filtro.llamar(forms, función(form) {
form.addEventListener('submit', función(event) {
if (form.checkValidity() === falso) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, falso);
});
}, falso);
})();
</script>
<!-- /registro -->
</div>
</div>
</div>
</div>
¡Gracias por tu ayuda!
1 Respuesta
Brian Jensen
Profesor de TreehouseHola Rye Zhu
¡Es realmente impresionante que te esfuerces más allá de lo esperado agregando validación de formularios al proyecto del curso!
Tu código es en realidad perfecto, ¡tienes todas las clases correctas añadidas a los elementos del formulario y el fragmento de JavaScript correcto, así que excelente trabajo! El problema es causado por un error con la clase pseudo CSS :valid en Bootstrap 4 beta que se usa en el proyecto del curso. Aquí está la solución que puedes añadir a tu custom.css archivo, entonces la validación se comportará como esperabas:
.valid-feedback {
mostrar: ninguno;
margin-top: .25rem;
font-size: .875rem;
color: #28a745;
}
.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .custom-select:valid ~ .valid-feedback {
mostrar: bloque;
}
.was-validated .form-control:valid ~ .invalid-feedback,
.was-validated .custom-select:valid ~ .invalid-feedback {
mostrar: ninguno;
}
¡Espero que esto te ayude!
Rye Zhu
6,273 PuntosRye Zhu
6,273 PuntosHola Brian,
¡Muchas gracias! Ahora funciona perfectamente.