Vamos traduzir a mensagem “Please fill out this field” do atributo required do input que aparece quando o usuário não preenche um campo obrigatório.
É muito importante a mensagem “Please fill out this field” para “Por favor, preencha este campo” ou outra mensagem similar para que os usuários alvos, os de língua portuguesa, compreendam claramente a mensagem e possam preencher corretamente os campos obrigatórios em um formulário HTML.
Quer saber mais sobre HTML? Clique aqui para acessar outros posts.
Para fazer isso, podemos usar a propriedade setCustomValidity do JavaScript. Usar JavaScript é essencial por conta da sua facilidade.
Vamos criar nosso formulário simples para essa prática
<form> <label for="campoNome">Nome:</label> <input type="text" id="campoNome" name="campoNome" required> <input type="number" id="campoIdade" name="campoIdade"> <button type="submit">Enviar</button> </form>
Veja que apenas o campoNome está como obrigatório o seu preenchimento, pois apenas ele tem o atributo required.
Veja que temos um id como identificador único para nosso campo, iremos pegar o campo campoNome por ele e usar setCustomValidity do javaScript para definir a mensagem traduzida.
Logo abaixo do formulário, acrescente:
<script>
document.getElementById('campoNome').setCustomValidity('Por favor, preencha este campo!');
</script>
Você poderá fazer isso para todos os demais campos que tiver dentro do seu formulário.
Código Completo e imagem ilustrada
Veja imagem de exemplo,
Veja o código completo abaixo.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo</title>
</head>
<body>
<form>
<label for="campoNome">Nome:</label>
<input type="text" id="campoNome" name="campoNome" required>
<input type="number" id="campoIdade" name="campoIdade">
<button type="submit">Enviar</button>
</form>
<script>
document.getElementById('campoNome').setCustomValidity('Por favor, preencha este campo!');
</script>
</body>
</html>