forms - validacion - cambiar el idioma del mensaje de error en el campo requerido en el formulario de contacto html5

validar formulario javascript html5

Question

Estoy tratando de cambiar el idioma del mensaje de error en el campo de formulario html5.

Tengo este código:

<input type="text" name="company_name"  oninvalid="setCustomValidity(''Lütfen işaretli yerleri doldurunuz'')" required /> 

pero en el envío, incluso el campo no está en blanco, sigo recibiendo el mensaje de error.

Intenté con <input type="text" name="company_name" setCustomValidity(''Lütfen işaretli yerleri doldurunuz'') required />

pero luego se muestra el mensaje en inglés. ¿Alguien sabe cómo puedo mostrar el mensaje de error en otro idioma?

Saludos, Zoran

Answer 1

El propósito de setCustomValidity no es solo establecer el mensaje de validación, sino que marca el campo como no válido. Le permite escribir comprobaciones de validación personalizadas que no son compatibles de forma nativa.

Tiene dos formas posibles de configurar un mensaje personalizado, uno fácil que no involucre Javascript y otro que sí lo haga.

La forma más fácil es simplemente usar el atributo de title en el elemento de entrada; su contenido se muestra junto con el mensaje estándar del navegador.

<input type="text" required title="Lütfen işaretli yerleri doldurunuz" />

Si solo desea que se muestre su mensaje personalizado, se requiere un poco de Javascript. He proporcionado ambos ejemplos para ti en este violín .

Answer 2

Sé que esta es una publicación anterior, pero quiero compartir mi experiencia.

HTML:

<input type="text" placeholder="Username or E-Mail" required data-required-message="E-Mail or Username is Required!">

Javascript (jQuery):

$(''input[required]'').on(''invalid'', function() {
    this.setCustomValidity($(this).data("required-message"));
});

Esta es una muestra muy simple. Espero que esto pueda ayudar a cualquiera.

Answer 3

olvídate de this en oninvalid , cambia tu código con esto:

    oninvalid="this.setCustomValidity(''Lütfen işaretli yerleri doldurunuz'')"

<form><input type="text" name="company_name"  oninvalid="this.setCustomValidity(''Lütfen işaretli yerleri doldurunuz'')" required /><input type="submit">
</form>

Answer 4

HTML:

<form id="myform">
    <input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  type="email" required="required" />
    <input type="submit" />
</form>

JAVASCRIPT:

function InvalidMsg(textbox) {
    if (textbox.value == '''') {
        textbox.setCustomValidity(''Lütfen işaretli yerleri doldurunuz'');
    }
    else if (textbox.validity.typeMismatch){{
        textbox.setCustomValidity(''please enter a valid email address'');
    }
    else {
       textbox.setCustomValidity('''');
    }
    return true;
}

Demo:

http://jsfiddle.net/patelriki13/Sqq8e/4

Answer 5

<input type="text" id="inputName"  placeholder="Enter name"  required  oninvalid="this.setCustomValidity(''Please Enter your first name'')" >

esto puede ayudarlo aún más, rápido, conveniente y más fácil.

Answer 6

//Dynamic custome validation on all fields
//add validate-msg attr to all inputs
//add this js code

$("form :input").each(function(){
                    var input = $(this);
                    var msg   = input.attr(''validate-msg'');
                    input.on(''change invalid input'', function(){
                        input[0].setCustomValidity('''');
                        if(!(input[0].validity.tooLong || input[0].validity.tooShort)){
                            if (! input[0].validity.valid) {
                                input[0].setCustomValidity(msg);
                            }
                        }


                    });
                });