ASP.NET JQuery, Utilizando Validação em Formulários.
Referencias:
Jquery
Jquery Validate
Após baixar os arquivos, localize os componentes JQuery no seguinte caminho: ..\jquery-validation-1.13.1\dist\jquery.validate.js.
Após isso, adicione os arquivos do JQuery em sua "Solution"
Dentro dessa tag iremos inserir o seguinte código.
Observem que logo após a abertura da nossa function inserimos o nome do nosso formulário no qual desejamos validar, e em seguida, definimos se o campo será obrigatório ou não, juntamente da quantidade minima de caracteres que esse campo irá aceitar.
Em messages definimos a mensagem que será exibida ao entrar com os dados incorretos no sistema.
Pronto, feito isso o nossa validação já está funcional, com as regras, e as mensagens a serem exibidas
definidas, iremos testar essa função.
Jquery
Jquery Validate
Após baixar os arquivos, localize os componentes JQuery no seguinte caminho: ..\jquery-validation-1.13.1\dist\jquery.validate.js.
Após isso, adicione os arquivos do JQuery em sua "Solution"
Feito isso, iremos criar uma "div" dentro do "Form" principal, e dentro dessa "div" iremos criar uma "table", então, após criarmos a estrutura do nosso formulário, iremos criar os componentes, sendo eles um dois controles do tipo label, que servirá para identificarmos nossos campos, e logo após criamos dois campos do tipo TextBox, onde iremos inserir os dados que serão validados. E por ultimo inserimos um botão de validação, que será responsável por chamar o nosso método validation.
Para utilização do JQuery, é necessário referenciar os arquivos baixados dentro da nossa página. Iremos incluir essas referencias dentro da tag <head>, como mostra o exemplo abaixo.
Logo abaixo essas referencias, iremos incluir a tag de abertura "script", do tipo javascript. Dentro dessa tag, é onde iremos inserir o código que irá validar os dados do nosso formulário.
Dentro dessa tag iremos inserir o seguinte código.
Observem que logo após a abertura da nossa function inserimos o nome do nosso formulário no qual desejamos validar, e em seguida, definimos se o campo será obrigatório ou não, juntamente da quantidade minima de caracteres que esse campo irá aceitar.
Em messages definimos a mensagem que será exibida ao entrar com os dados incorretos no sistema.
Pronto, feito isso o nossa validação já está funcional, com as regras, e as mensagens a serem exibidas
definidas, iremos testar essa função.
Ao debugar nossa WebPagina, observamos nosso formulário conforme criamos nos passos anteriores.
Ao Clicarmos no botão confirmar com os campos em branco, ele exibirá a mensagem dizendo que os campos são obrigatórios.
Dessa forma conseguimos impedir entrada de strings nulas ou vazias no nosso sistema, tratando do lado do usuário.
Ao inserirmos dados nos campos que não atendem a quantidade minima de caracteres, o sistema nos exibe uma nova mensagem, informando a quantidade minima a ser inserida em cada campo.
No Caso do e-mail, ele irá validar se o mesmo é valido. caso não seja, o sistema irá retornar uma mensagem solicitando a entrada de um e-mail valido.
Então é isso pessoal, a nossa função de validação em JQuery está pronta.
Até a Proxima.
Comentários
Postar um comentário