cambiar mensaje required

[malakian]

Hola, tengo un input de esta forma

Código HTML:

<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]

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:

$(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]

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]

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]

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

[memoadian]

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

[malakian]

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

[richardinj]

<input title="Se necesita un nombre" type="text" name="nombre" required/>

[solmedina87]

Iniciado por richardinj

<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:

<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:

<script type="text/javascript">
function check_text(input) {  
    if (input.validity.patternMismatch){  
        input.setCustomValidity("Debe ingresar al menos 3 LETRAS");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  </script>