Validação de formulário no front

Já vi várias vezes pessoas com algumas dúvidas ou dificuldades pra fazer validação do formulário.

Resolvi criar esse tópico pra demonstrar a forma que eu faço e deixar de exemplo pra quem se precisar. Quem quiser compartilhar o jeito que faz, fique a vontade.

Bom, primeiramente, a estrutura do HTML é a seguinte:

<div class="row">
	<div class="form-field col-md-6">
		<div class="form-input">
			<div class="form-group">
				<label for="campo1">Campo 1</label>
				<input type="text" name="campo1" id="campo1" class="form-control">
			</div>
		</div>
	</div>
	<div class="form-field col-md-6">
		<div class="form-input">
			<div class="form-group">
				<label for="campo2">Campo 2</label>
				<input type="text" name="campo2" id="campo2" class="form-control">
			</div>
		</div>
	</div>
</div>

A validação é feita em um arquivo js, no beforeSendValidate. Nele, tem uma estrutura já montada (que serve pra todos os processos, só precisando alterar quais campos precisam ser validados) onde é feita a checagem dos campos marcados como obrigatórios. É um código extenso, então vou deixar aqui pra quem quiser baixar. formValidate.js (11,0,KB)

Mas, basicamente, ele possui a seguinte estrutura:
image

Quem quiser pegar o código pra entender como funciona, fique a vontade. Mas o mais importante é entender que pra poder fazer a validação de um campo só precisa simplesmente chamar a função addHasFree passando o nome do campo como parâmetro.

O throw é mais amigável do que no evento validateForm. E a função ainda colore os campos e as labels de vermelho, ficando da seguinte forma:

É interessante também porque, caso precise executar algum código após a validação ter sido verificada sem erros, é só adicionar o código depois do exibeCamposObrigatórios(), uma vez que ao encontrar algum campo sem preenchimento, o throw obviamente interrompe o código antes.

Qualquer dúvida, só perguntar. Espero que ajude alguém.

8 curtidas

Dá uma olhada, @lucaslemuel_f.

2 curtidas

Ainda não testei, mas tenho vontade de usar o plugin JQuery Validation e chamar a validação na beforeSendValidate.

Quando comecei a mexer com o Fluig eu fiquei abismado dele não aceitar validações básicas do HTML (campos obrigatórios, por exemplo).

1 curtida

Já fizemos algo parecido aqui, utilizando o validateForm (preservando as regras de validação no backend) e devolvendo ao front os campos a corrigir, além do realce em tela. Deixar tudo no front não deixa de ser um risco…se quiserem compartilho tbm.

Desenvolvido pelo nosso colega Kelvin Hudson que não tomou vergonha na cara de se cadastrar aqui ainda…rs…

4 curtidas

Já usei @Bruno_Gasparetto , é uma porcaria! não vale a pena.

Está forma mencionada acima, é a indicada pelo time de produto.

Parabens @victorcastro

2 curtidas

Claro. Novas ideias são sempre bem-vindas.

Uma boa ideia é validar no front é no back vou testar uma forma fácil e posto aqui.

2 curtidas

O legal é que se você criar a variável do validator. Ex.:

$validator = $('form').validate({...});

É possível resgatar todas as mensagens de erro dos campos:

$validator.errorList

Assim você pode exibir junto na mensagem para o usuário.

2 curtidas

@victorcastro o download do JS quebrou! resolve pra nois.

Tô upando o arquivo aqui mas não tá dando pra baixar. Não sei o que houve…

Vou deixar um link do drive pra quem quiser baixar (formValidate.js).

Massa @helbert_campos. Se quiser, deixa um exemplo de validação que você faz pra galera ter uma ideia.

1 curtida

@helbert_campos , foi exatamente o que imaginei. Usar um plugin JQuery de validação, chamar a validação manualmente no evento beforeSendValidate (já que o Fluig não dispara a validação do formulário) e caso tenha erros exibir no throw.

1 curtida

O meu problema com o throw do back é estético kkkkkkkkk

1 curtida

@victorcastro , sobe aqui no fórum mesmo:

image

Já tentou?

Sim, deu o mesmo problema.

@victorcastro, desculpe a minha ignorância… mas eu procurei o evento beforeSendValidate, mas não localizei… preciso criar ele “na mão” mesmo ?

@JulioRocha , o evento beforeSendValidate é um evento que acontece do lado do cliente (navegador) antes do formulário ser enviado pro Fluig.

Basta você criar a função com esse nome no seu JS que é carregado no HTML do formulário.

https://tdn.totvs.com/pages/releaseview.action?pageId=270924158#EventosdeFormulário-beforeSendValidate

2 curtidas

Vou testar, muito obrigado!

@JulioRocha é isso aí o que o @Bruno_Gasparetto falou. No arquivo que eu disponibilizei pra baixar tem lá um exemplo de implementação.

Qualquer dúvida pode perguntar, sem problemas.

Basicamente eu preciso abrir uma tag e inserir todo o código que o @victorcastro enviou, certo ?

1 curtida