web-dev-qa-db-fra.com

changer la langue du message d'erreur dans le champ obligatoire du formulaire de contact html5

J'essaye de changer la langue du message d'erreur dans le champ de formulaire html5.

J'ai ce code:

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

mais lors de l'envoi, même le champ n'est pas vide, le message d'erreur persiste.

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

mais alors le message anglais est affiché. Quelqu'un sait comment puis-je afficher le message d'erreur sur une autre langue?

Cordialement, Zoran

formshtml5
50
Zoran

Le but de setCustomValidity n'est pas simplement de définir le message de validation, il indique lui-même le champ comme non valide. Il vous permet d’écrire des contrôles de validation personnalisés qui ne sont pas pris en charge de manière native.

Vous avez deux façons possibles de définir un message personnalisé: un message simple, sans Javascript, et un autre.

Le moyen le plus simple consiste à utiliser simplement l'attribut title sur l'élément d'entrée - son contenu est affiché avec le message standard du navigateur.

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

enter image description here

Si vous souhaitez uniquement que votre message personnalisé soit affiché, un peu de Javascript est requis. J'ai fourni les deux exemples pour vous dans ce violon .

71
janfoeh

votre oubli this dans oninvalid, changez votre code avec ceci:

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

enter image description here

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

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;
}

Démo:

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

13
Rikin Patel

Je sais que c'est un ancien post mais je veux partager mon expérience.

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"));
});

C'est un exemple très simple. J'espère que cela peut aider à n'importe qui.

6
R. Canser Yanbakan
//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);
                            }
                        }


                    });
                });
1
Othman Mahmoud
<input type="text" id="inputName"  placeholder="Enter name"  required  oninvalid="this.setCustomValidity('Your Message')" oninput="this.setCustomValidity('') />

cela peut vous aider encore mieux, rapide, pratique et facile.

1
Tahir Khurshid