Diseño Web y Marketing Digital

Hacemos accesible Internet a las Empresas

Teléfono Fijo 91 881 47 19

91 881 47 19

Horario de Verano
del 15/06 al 15/09
de L a V de 9:00 a 15:00

hablamos de tu proyecto
Martes, 19 Septiembre 2017 09:49

Validar Formulario en Bootstrap con Javascript

Escrito por 
Valora este artículo
(3 votos)

Veremos cómo validar los campos de un formulario creado con Bootstrap y usando JavaScript y Jquery para la validación de los diferentes campos del formulario. Partimos de la base de que tenemos instalado Bootstrap 3.0 con Jquery para realizar este ejemplo.

 

Para realizar un ejemplo, crearemos un formulario con los siguientes campos:

  • Nombre
  • Email
  • Mensaje
  • Acepto LOPD

El formulario está creado con las características de estilo y clases de Bootstrap 3.0 He marcado en color verde el nombre que damos a cada campo, ya que lo utilizaremos en el código JavaScript para validarlos. También es importante poner unas etiquetas de span debajo de cada campo del formulario, son las que marco de color azul. Estas etiquetas recogerán el texto del error a la hora de validar el campo. Este texto se define en el JavaScript del fichero validator.js que veremos más adelante.

<form method="post" id="formulario-contacto" role="form" autocomplete="off">
<div class="form-group has-success">
<input class="form-control hidden" type="text" name="pack" value="contacto" readonly placeholder="Nombre" />
<input class="form-control" type="text" name="nombre" placeholder="Nombre" />
<span id="error" class="help-block"></span></div>

<div class="form-group has-error">
<input class="form-control" type="email" name="email" placeholder="Correo electrónico" />
<span id="error" class="help-block"></span></div>

<div class="form-group">
<textarea class="form-control" rows="14" name="mensaje" placeholder="Mensaje"></textarea>
<span id="error" class="help-block"></span></div>

<div class="checkbox">
<label>
<input type="checkbox" name="aceptolopd" value="Acepto Lopd" required />
He leído y acepto la política de protección de datos.</label>

</div>
<div class="form-group">
<button class="btn btn-primary btn-lg" type="submit">Enviar </button>
</div>
</form>

Necesitaremos un archivo de Javascript que llamaremos "validator.js" y que contenga las rutinas necesarias para la validación del formulario. Pongo más abajo el código integro que usaremos para este ejemplo de formulario y que se puede adaptar según la necesidad de cada uno. Como veréis, es muy sencillo y comprensible, y no tendréis ningún problema a la hora de implementar más campos en el formulario y validarlos.

Es evidente que tendremos que hacer la llamada al archivo validator.js desde el html que contiene el formulario. Lo haremos con la siguiente línea de código, y que en la medida de lo posible pondremos al final de la página para que cargue primero los contenidos de la web y luego los recursos externos.

<script src="/solucionindividual/assets/js/validator.js"></script>

Para este ejemplo, el código javascript se guarda dentro de la carpeta assets/js pero vosotros podéis ponerlo donde lo requiera vuestro proyecto.  En el código destaco en color verde, el nombre de los campos que se han puesto en el formulario Html y el nombre del formulario, que en este ejemplo es "formulario-contacto" precedido de una # como se ve en el código de abajo. Al final del código, destaco en negrita los métodos form.action y form.submit, que el primero contiene el nombre de la página PHP que recibirá los datos del formulario y que realizará el envío del correo electrónico a quien corresponda.

Como podéis ver en el código de abajo, es muy sencillo poder añadir el nombre de otros campos del formulario, en caso de necesitarlos, ya que se trata de un Array y su estructura es muy sencilla de comprender.

Hay que tener en cuenta que esta validación únicamente se hace a nivel de cliente, es decir, si el cliente tiene desactivado JavaScript de su navegador (Que no es lo habitual), no funcionará. No obstante, siempre se puede hacer una validación del lado del servidor, mediante la página que recoge los campos del formulario. 

Código para copiar y guardar con el nombre de archivo validator.js 

// JavaScript Validación
$('document').ready(function(){
// Validación para campos de texto exclusivo, sin caracteres especiales ni números
var nameregex = /^[a-zA-Z ]+$/;

$.validator.addMethod("validname", function( value, element ) {
return this.optional( element ) || nameregex.test( value );
});

// Máscara para validación de Email
var eregex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

$.validator.addMethod("validemail", function( value, element ) {
return this.optional( element ) || eregex.test( value );
});

$("#formulario-contacto").validate({

rules:
{
nombre: {
required: true,
minlength: 8
},
email: {
required: true,
validemail: true
},
mensaje: {
required: true,
minlength: 20,
maxlength: 300
},
},
messages:
{
nombre: {
required: "Tu Nombre y Apellidos son Importantes",
minlength: "Tu Nombre es demasiado corto"
},
email: {
required: "Por Favor, introduzca una dirección de correo",
validemail: "Introduzca correctamente su correo"
},
mensaje: {
required: "Tu Nombre y Apellidos son Importantes",
minlength: "Tu Mensaje es demasiado corto",
maxlength: "Tu Mensaje supera los 300 caracteres"
},
},
errorPlacement : function(error, element) {
$(element).closest('.form-group').find('.help-block').html(error.html());
},
highlight : function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
$(element).closest('.form-group').find('.help-block').html('');
},

submitHandler: function(form) {
form.action="pagina que envia el correo.php";
form.submit();

alert('ok');
}
});
})

Comparte este Artículo en tus Redes Sociales



Guía de Microempresas
¿Aún no estás en la Guía de Microempresas?
¿Quieres saber si eres una Microempresa?
La Guía definitiva para encontrar lo que necesitas.
¡Date de Alta Gratuitamente!

banner-diseño-web


 

Visto 9292 veces Modificado por última vez en Viernes, 26 Enero 2018 10:27

Artículos relacionados (por etiqueta)

  • Integrar Font Awesome 5.0.6 en Joomla

    En este artículo veremos cómo se integra Font Awesome 5.0.6 en el CMS de Joomla para que podamos utilizar todos los iconos y efectos que podemos aplicar con esta tipografía.

  • Qué es una Página Web Autogestionable

    Diseño Web

    Cuando usamos nuestro Ordenador, Tablet o Smartphone, estamos acostumbrados a crear y modificar documentos de diversos tipos e incluso a publicar en nuestras redes sociales.

  • ¿Qué es una Página de Aterrizaje o Landing Page?

    Una landing page, también conocida como página de aterrizaje, es una página web diseñada específicamente para convertir visitantes en leads. Antes de continuar deberíamos aclarar lo que entendemos por Leads.

  • ¿Por qué debo actualizar mi Página Web?

    Debes tener muy claro que la web es la imagen de tu negocio que muchos consumidores, usuarios o clientes, conocen de tu empresa. Al igual que entramos en un establecimiento porque nos gusta el espacio o nos llama la atención, así como las empresas se molestan en tener oficinas cómodas y con buenos servicios para sus clientes y trabajadores. Las páginas web son el reclamo y principal foco de atención para un cliente que decide entrar en ella y realizar una compra de un producto, servicio o consulta. La web habla mucho de nuestra empresa por lo que debe estar a la altura y responder a las expectativas del usuario. Lo contrario puede ser nefasto y puede hacernos perder a un cliente.

  • Qué es el SEO y por qué es necesario para tu Web

    SEO (Search Engine Optimization) - que en español podemos traducir como optimización para motores de búsqueda- es la práctica de utilizar una serie de técnicas, incluidas la reescritura del código html, la edición de contenidos, la navegación en el site, campañas de enlaces y más acciones, con el fin de mejorar la posición de una web en los resultados de los buscadores para unos términos de búsqueda concretos. Sencillo, necesitamos que nuestra web sea encontrada para que sea útil.

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.

¡Atención! Este sitio utiliza cookies.

Si no cambia la configuración de su navegador, usted acepta su uso. Saber más Acepto

logo cabecera web
EIE (Espacio de Iniciativas Empresariales)
Parque Empresarial La Garena
C/Blas Cabrera, 23
Alcalá de Henares - Madrid
Teléfono: 91 881 47 19
Mapa Localización 

sello ssl comodo 90

telefono web
Teléfono de atención al cliente:

Horario de Verano: del 15/06 al 15/09
de Lunes a Viernes de 9:00 a 15:00

Consultoría de Internet | Diseño Web | Mapa del Sitio

Solución Individual ® y su Logotipo son
Nombre Comercial y Marca Registrada.
 © Reservados Derechos de Autor 2010 

Microempresa asociada a AEMME
logo AEMME P

Te puede interesar: Microempresas | Despachos Profesionales | PYMES

Servicios: Contratación de Dominios | Contratación de Certificados SSL | Hosting Web en España

Partners: InfodemiBoda.es | GuíadeMicroempresas.es


acceso candado   social facebook   social google   social twitter   social flickr   social pixabay   social pinterest   social youtube   social guiamicroempresas 


 Los precios indicados en esta web NO incluyen el IVA

Somos un sitio de confianza y nos presentamos con total 

Transparencia y Legalidad.

Servicio de CalidadServicio de CompromisoServicio de Garantía