Foros del web, comunidad de entusiastas web

malakian · 22/02/2012, 10:51

Hola, tengo un input de esta forma

Código HTML:

Ver originalCopiar<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, 12:27

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 originalCopiar$(document).ready(function () {
    var intputElements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < intputElements.length; i++) {
        intputElements[i].oninvalid = function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                if (e.target.name == "username") {
                    e.target.setCustomValidity("The field 'Username' cannot be left blank");
                }
                else {
                    e.target.setCustomValidity("The field 'Password' cannot be left blank");
                }
            }
        };
    }
})

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, 13:00

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, 15:59

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, 06:09

eso pense! para que usar un framework? seria como redundar, pero bueno gracias por el aporte del "title"

memoadian · 24/02/2012, 10:39

usar o no un framework depende de ti, el ejemplo qu pusieron es solo una idea.

malakian · 27/02/2012, 05:43

Cita:

Iniciado por memoadian

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

22/02/2012, 10:51	#1 (permalink)
malakian Mensajes: 381 Karma: 672 Ubicación: $malakian->Colombia();	cambiar mensaje required Hola, tengo un input de esta forma Código HTML: Ver original Copiar <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 __________________ Guitar Loco

22/02/2012, 12:27	#2 (permalink)
arhego Mensajes: 8 Karma: n/a	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 Copiar $(document).ready(function () { var intputElements = document.getElementsByTagName("INPUT"); for (var i = 0; i < intputElements.length; i++) { intputElements[i].oninvalid = function (e) { e.target.setCustomValidity(""); if (!e.target.validity.valid) { if (e.target.name == "username") { e.target.setCustomValidity("The field 'Username' cannot be left blank"); } else { e.target.setCustomValidity("The field 'Password' cannot be left blank"); } } }; } }) 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

23/02/2012, 13:00	#3 (permalink)
malakian Mensajes: 381 Karma: 672 Ubicación: $malakian->Colombia();	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 __________________ Guitar Loco

23/02/2012, 15:59	#4 (permalink)
emprear Colaborador Mensajes: 4.694 Karma: 23233 Ubicación: Castelar	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 __________________ La voz de las antenas va, sustituyendo a Dios. Cuando finalice la mutación, nueva edad media habrá S.R.

24/02/2012, 06:09	#5 (permalink)
malakian Mensajes: 381 Karma: 672 Ubicación: $malakian->Colombia();	Respuesta: cambiar mensaje required eso pense! para que usar un framework? seria como redundar, pero bueno gracias por el aporte del "title" __________________ Guitar Loco

24/02/2012, 10:39	#6 (permalink)
memoadian Mensajes: 2.104 Karma: 6441 Ubicación: Manganimemas	Respuesta: cambiar mensaje required usar o no un framework depende de ti, el ejemplo qu pusieron es solo una idea. __________________ a mi me gusta dar Cursos del webmaster y ahora tambien HTML5 videotutoriales

27/02/2012, 05:43	#7 (permalink)
malakian Mensajes: 381 Karma: 672 Ubicación: $malakian->Colombia();	Respuesta: cambiar mensaje required Cita: Iniciado por memoadian 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 __________________ Guitar Loco

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Modo lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado