Trabalhando com atributos HTML personalizados no Thymeleaf
1. Visão geral
Neste tutorial, veremos como podemos definir atributos personalizados nas tags HTML5 usando o Thymeleaf. É uma estrutura de mecanismo de modelo que permite que o HTML simples seja usado para exibir dados dinâmicos.
Para um artigo introdutório sobre o Thymeleaf ou sua integração com o Spring, consulte estelink.
2. Atributos personalizados em HTML5
Às vezes, podemos exigir informações extras nas páginas HTML para realizar algum processamento no lado do cliente. Por exemplo, podemos querer salvar dados adicionais nas tagsforminput para que possamos usá-los ao enviar o formulário usando AJAX.
Da mesma forma, convém exibir mensagens de erro de validação personalizadas para um usuário que preenche um formulário.
Em qualquer caso,we can supply this additional data by using HTML 5’s custom attributes. Custom attributes can be defined in an HTML tag using the data- prefix.
Agora, vamos ver como podemos definir esses atributos usando o dialeto padrão no Thymeleaf.
3. Atributos HTML personalizados no Thymeleaf
Podemos especificar um atributo personalizado em uma tag HTML usando a sintaxe:
th:data-="" Vamos criar um formulário simples que permita a um aluno se registrar em um curso para ver as coisas em ação:
Este formulário contém um único menu suspenso com os cursos disponíveis e um botão de envio.
Digamos que queremos mostrar uma mensagem de erro personalizada ao usuário se ele clicar em enviar sem selecionar um curso.
Podemos salvar a mensagem de erro como um atributo personalizado na tagselect e criar uma função JavaScript para validar seu valor ao enviar o formulário.
A tagselect atualizada se parece com isto:
Aqui, estamos obtendo a mensagem de erro do pacote de recursos.
Agora, quando o usuário enviar o formulário sem selecionar uma opção válida, essa função JavaScript exibirá uma mensagem de erro para o usuário:
function validateForm() {
var e = document.getElementById("course");
var value = e.options[e.selectedIndex].value;
if (value == '') {
var error = document.getElementById("errormesg");
error.textContent = e.getAttribute('data-validation-message');
return false;
}
return true;
}Da mesma forma, podemos adicionar vários atributos personalizados às tags HTML definindo o atributoth:data-* para cada um deles.
3. Conclusão
Neste artigo rápido, exploramos como podemos aproveitar o suporte do Thymeleaf para adicionar atributos personalizados em modelos HTML5.
Como sempre, uma versão funcional deste código está disponívelover on Github.