Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   HTML (http://www.forosdelweb.com/f4/)
-   -   cambiar mensaje required (http://www.forosdelweb.com/f4/cambiar-mensaje-required-977517/)

malakian 22/02/2012 11:51
cambiar mensaje required
 
Hola, tengo un input de esta forma
Código HTML: 
Ver original
  1. <input type="text" name="caja" required />

bueno, la propiedad required funciona perfecto, pero es posible personalizar el mensaje que aparece cuando no se ha digitado nada? por que aparece "please fill out this field"

-Otra cosa, seria bueno validar tambien con JavaScript??? lo digo por la compatibilidad entre navegadores, gracias

arhego 22/02/2012 13:27
Respuesta: cambiar mensaje required
 
Que tal, busqué un poco (apenas comienzo con html5) cómo se haría esto y lo que proponén es mediante javascript
aca tienes mayor documentación.
[URL="http://blog.thomaslebrun.net/2011/11/html-5-how-to-customize-the-error-message-for-a-required-field/#.T0U9w2zqrVM"]http://blog.thomaslebrun.net/2011/11/html-5-how-to-customize-the-error-message-for-a-required-field/#.T0U9w2zqrVM[/URL]

la función es la siguiente:

Código Javascript: 
Ver original
  1. $(document).ready(function () {
  2.     var intputElements = document.getElementsByTagName("INPUT");
  3.     for (var i = 0; i < intputElements.length; i++) {
  4.         intputElements[i].oninvalid = function (e) {
  5.             e.target.setCustomValidity("");
  6.             if (!e.target.validity.valid) {
  7.                 if (e.target.name == "username") {
  8.                     e.target.setCustomValidity("The field 'Username' cannot be left blank");
  9.                 }
  10.                 else {
  11.                     e.target.setCustomValidity("The field 'Password' cannot be left blank");
  12.                 }
  13.             }
  14.         };
  15.     }
  16. })

Hacen uso de Jquery, las validaciones lado cliente son importantes (con js o como en este caso con html5) pero no hay que dejar nunca fuera las validaciones lado servidor para evitar que el usuario simplemente deshabilite Js -por poner un ejemplo-

Saludos

malakian 23/02/2012 14:00
Respuesta: cambiar mensaje required
 
Muchas gracias, no pense que tuviera que usar un framework para esto... supongo que lo podre manipular desde el DOM...
muchas gracias por el aporte, lo aprovechare, de igual manera seguire en busca :-)

emprear 23/02/2012 16:59
Respuesta: cambiar mensaje required
 
La idea del atributo es no tener que usar javascript. Si vas a terminar usando jquery, más vale validar y personalizar los mensajes de error desde ahi y no usar el requred
solo chrome te permite cierto grado de personalizaciín agregando un title al input

Saludos

malakian 24/02/2012 07:09
Respuesta: cambiar mensaje required
 
eso pense! para que usar un framework? seria como redundar, pero bueno gracias por el aporte del "title"

memoadian 24/02/2012 11:39
Respuesta: cambiar mensaje required
 
usar o no un framework depende de ti, el ejemplo qu pusieron es solo una idea.

malakian 27/02/2012 06:43
Respuesta: cambiar mensaje required
 
Cita:
Iniciado por memoadian (Mensaje 4127437)
usar o no un framework depende de ti, el ejemplo qu pusieron es solo una idea.
Si ya lo se, solo no quiero usar un framework sabiendo que algo como una propiedad html lo puede solucionar

richardinj 14/04/2014 08:47
Respuesta: cambiar mensaje required
 
<input title="Se necesita un nombre" type="text" name="nombre" required/>

solmedina87 28/11/2014 10:02
Respuesta: cambiar mensaje required
 
Cita:
Iniciado por richardinj (Mensaje 4589901)
<input title="Se necesita un nombre" type="text" name="nombre" required/>
Lástima que acabo de verlo pero este atributo "title" solo se ve en Chrome si no me equivoco.

Yo encontre una forma bastante simple de cambiar el mensaje... si involucra un poquito de javascript.

Controlo con el atributo "pattern" lo que quiero que se ingrese en el input (en mi caso son solo letras y un minimo de 3 y maximo de 100 letras)
Código HTML: 
Ver original
  1. <input type="text" name="apellido" id="apellido" class="input-large" pattern="[A-Za-z]{3,100}" required oninput="check_text(this);"/>

Controlo que el pattern que ingrese en el input se cumpla y sino muestro el mensaje personalizado:
Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2. function check_text(input) {  
  3.     if (input.validity.patternMismatch){  
  4.         input.setCustomValidity("Debe ingresar al menos 3 LETRAS");  
  5.     }  
  6.     else {  
  7.         input.setCustomValidity("");  
  8.     }                 
  9. }  </script>


La zona horaria es GMT -6. Ahora son las 21:07.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.