Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: @XSStringManolo en 7 Diciembre 2019, 22:55 pm



Título: CSS modificar el mensaje que sale al intentar enviar un campo vacio con required
Publicado por: @XSStringManolo 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!


Título: Re: CSS modificar el mensaje que sale al intentar enviar un campo vacio con required
Publicado por: Leguim 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.