10

Com o atributo required (Inglês), por exemplo, num campo do tipo text, o navegador vai apresentar um balão ao utilizador a dar conta que esse campo é requerido e deverá ser preenchido.

O problema começa na mensagem em si que sendo genérica não ajuda o utilizador. Por outro lado, a mensagem diz respeito à língua do navegador e não propriamente à língua da aplicação.

Exemplo no JSFiddle

<form>
    <input type="text" required>
    <button type="submit">Enviar</button>
</form>

Ao clicar em "Enviar" sem preencher o campo, no Firefox em Inglês vou receber a mensagem:

Please fill out this field.

Pergunta

De que forma podemos personalizar a mensagem que o navegador apresenta para um input com o atributo required ?

3 Respostas 3

11

Você pode utilizar HTML para isso com a tag title:

title="This field should not be left blank."

Caso não funcione com o Firefox você pode adicionar:

x-moz-errormessage="This field should not be left blank."

Você também poderia fazer por JQuery:

$(document).ready(function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

Resposta resumida e traduzida daqui: https://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message

1
  • O title não funciona mais no Chrome, a resposta que você se baseou foi atualizada. Commented 11/08/2019 às 1:00
4

Ou, em html5, simplificando "um pouco" a solução, segue:

<div class="controls">
  <input class="span4" type="text" name="Campo" placeholder="Campo"  value=""  required oninvalid="this.setCustomValidity(\'Campo requerido\')">
</div>
4

Não pode ter a barra '\' dentro da mensagem. Além disso, precisamos também eliminar a mensagem assim que o usuário fizer alguma correção no campo, então utilizamos o evento onchage:

Então o correto e a linha completa ficaria assim:

<div class="controls">
<input class="span4" type="text" name="Campo" placeholder="Campo"  value=""  
required oninvalid="this.setCustomValidity('Campo requerido')" 
onchange="try{setCustomValidity('')}catch(e){}">
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .