elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía actualizada para evitar que un ransomware ataque tu empresa


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  CSS modificar el mensaje que sale al intentar enviar un campo vacio con required
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: CSS modificar el mensaje que sale al intentar enviar un campo vacio con required  (Leído 2,232 veces)
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
CSS modificar el mensaje que sale al intentar enviar un campo vacio con required
« en: 7 Diciembre 2019, 22:55 pm »

Ando haciendo una app web. En chrome (no sé otros navegadores) al pulsar por ejemplo en un input type text aparece un bordeado naranja al rededor del  campo de texto. Los estilé a azul utilizando la keyword outline en inputTypeText:focus

Cuando hago submit del campo de texto, si este está vacio, sale un mensaje diciendo que se debe completar el campo, con un símbolo de exclamación etc.
Lo que busco es como editar, remplazar o estilar este mensaje que se superpone a los elementos. Tiene detalles en naranja, entonces como mínimo quiero que quede con el mismo color que el resto de elementos de mi app/web.

Gracias!


En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: CSS modificar el mensaje que sale al intentar enviar un campo vacio con required
« Respuesta #1 en: 8 Diciembre 2019, 04:50 am »

Hola!

Capaz no es lo que buscas pero para "personalizar" de mostrar un error cuando se envía un campo vacío ya sea un input, textarea, select, etcétera lo que hago es usar código de javascript y jQuery de la siguiente manera.

Código
  1. <form id="form_index" method="post">
  2.       <input type="email" name="input_email>"
  3. </form>
  4.  

Código
  1. $(document).ready(function()
  2. {
  3.      $('#form_index').submit(function(e)
  4.      {
  5.     if(form_index.input_email.value == 0) // se accede a el formulario por medio de form_index la id y luego a el elemento ya sea un select, en este caso un input que tiene de name="" input_email
  6.     {
  7.     e.preventDefault(); // sirve para no enviar el formulario
  8.  
  9.                     form_index.input_email.focus(); // hace el foco en el input que esta vacío
  10.                     form_index.input_email.style.border = '1px solid red'; // Marked
  11.  
  12.                    alert('no seas vago y completa los campos!');
  13.     }
  14.       });
  15. });
  16.  


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Duda con mysql y php, saber si un campo esta vacio
PHP
dominioswww 7 19,674 Último mensaje 25 Mayo 2008, 23:57 pm
por dominioswww
¿Me sale un mensaje extraño al intentar entrar a mi hotmail desde Chrome?
Seguridad
theluigy13etv 3 3,026 Último mensaje 14 Septiembre 2014, 18:10 pm
por Songoku
Al intentar quemar Wifislax me sale error
Hardware
ElRodrik 9 3,864 Último mensaje 26 Mayo 2015, 13:34 pm
por ElRodrik
Mostar campo Fecha Vacio
PHP
tomasvreal28 2 1,842 Último mensaje 10 Diciembre 2015, 18:03 pm
por WHK
Por qué el widget de calendario sale vacío digi call?
Dispositivos Móviles (PDA's, Smartphones, Tablets)
Terminator5 2 2,477 Último mensaje 2 Junio 2022, 18:53 pm
por Terminator5
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines