Adicionando Validação em HTML dinâmico

Bem, como sofri bastante para achar a solução para isto, resolvi compartilhar com os visitantes do meu blog, se houver algum rsrsrs.

O script deste post serve para adicionar validação em objetos incluídos depois da página já ter sido carregada, desde que a mesma tenha sido feita em MVC 3 do ASP.NET utilizando o jQuery Validator.

Como funciona:
O MVC 3 cria os elementos HTML parecidos com este:

  1. <input type="text" value=""  name="Nome.Do.Meu.Campo" id="Nome_Do_Meu_Campo" data-val-required="O campo precisa ser preenchido" data-val-range-min="10" data-val-range-max="20" data-val-range="O valor do campo deve ser entre 10 e 20" data-val-number="O campo deve ser um número" data-val="true">

Sendo assim o .NET executa o jQuery Validator no form, que interpreta esses atributos no elemento HTML e cria as regras de validação no lado do cliente.

Porém, se você simplesmente adicionar um novo elemento na página (com os atributos de validação) depois de carregada, ele simplesmente não será validado, para isto você deverá executar o script abaixo após incluir o elemento na tela, assim o validador da página será reescrito e passará a validar os novos campos também.

Ex:

  1. // Adiciona o campo na tela
  2. $(‘<input type="text" value=""  name="Nome.Do.Meu.Campo" id="Nome_Do_Meu_Campo" data-val-required="O campo precisa ser preenchido" data-val-range-min="10" data-val-range-max="20" data-val-range="O valor do campo deve ser entre 10 e 20" data-val-number="O campo deve ser um número" data-val="true">’).appendTo("form");
  3.  
  4. // Formulário
  5. var $form = $("form");
  6.  
  7. // Tira o bind do validador atualmente existente.
  8. $form.unbind();
  9. $form.data("validator", null);
  10.  
  11. // Verifica mudanças no documento
  12. $.validator.unobtrusive.parse(document);
  13.  
  14. // Aplica a validação no form novamente
  15. $form.validate($form.data("unobtrusiveValidation").options);
  16.  

Pronto, seus novos campos serão validados.

OBS: Lembro que devem ser adicionados os script js do jQuery, jQuery Validator e jQuery Validator Unobtrusive.

Sobre Cesar Bagatoli

Formado em Sistemas de Informação pela Uniasselvi e Pós-graduado em Gerenciamento de Projetos em TI, trabalho com desenvolvimento WEB utilizando PHP e C#.NET
Esta entrada foi publicada em .NET, jQuery, jQuery Validator, MVC 3 e marcada com a tag , , . Adicione o link permanente aos seus favoritos.

2 respostas para Adicionando Validação em HTML dinâmico

  1. Humberto disse:

    Cara, salvou minha pele esse seu artigo. Obrigado e parabéns pela iniciativa!!

  2. Marcio Vinicius disse:

    Simplesmente obrigado!!!!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *