Fórum Academy - Validação de dados

Criador Rodrigo Pais 02/10/2020

Bom dia Professor, tudo bem?

Eu montei um formulário de cadastro de cliente separando por PJ e PF, porém eu tenho os campos de Telefone Celular e Telefone Comercial que é comum a PJ e PF. Vamos supor que estou cadastrando uma PJ, e não preencho nada todos os campos apresentam a msg de erro, até ai tudo certinho, porém quando eu mudo o select para PF os campos mudam a msg de erro sai, porém o campo telefone como ele é comum aos 2 fica na tela com msg de erro na validação. Deu para enteder?

Abçs

RP

16 comentários

Manager Carlos Ferreira 02/10/2020

Olá, Rodrigo!
Tudo bem, e com você amigo?

Como está controlando este frontend para mudar o formulário de forma dinâmica? Está usando o Vue.js?

Sugiro que use a própria tecnologia frontend que usou para limpar (ocultar) as mensagens de validação.

Criador Rodrigo Pais 02/10/2020

Bom dia Professor.

Estou usando no formulário Java Scritp. Vou postar o codigo em etapas para o sr. verificar.

Criador Rodrigo Pais 02/10/2020

Logica para ocultar e exibir campos.

<script>
        alteraDiv = function() {
            if ($('#tp_cliente').val() == 1) {
                $("#name").show();
                $("#cpf").show();
                $("#rg").show();
                $("#dt_nascimento").show();
                $("#tp_contribuinte").show();
                $("#name_fantasia").hide();
                $("#name_razao").hide();
                $("#cnpj").hide();
                $("#ie").hide();
                $("#im").hide();
                $("#is").hide();
                $("#responsavel").hide();
            }
            if ($('#tp_cliente').val() == 2) {
                $("#name").hide();
                $("#cpf").hide();
                $("#rg").hide();
                $("#dt_nascimento").hide();
                $("#tp_contribuinte").show();
                $("#name_fantasia").show();
                $("#name_razao").show();
                $("#cnpj").show();
                $("#ie").show();
                $("#im").show();
                $("#is").show();
                $("#responsavel").show();
            }
        }

    </script>

Criador Rodrigo Pais 02/10/2020

Regra de Validação - FormValidation

public function rules()
    {
        if (request('tp_cliente') == 1) {
            return [
                'tp_cliente'                    => 'required',
                'status_id'                     => 'required',
                'name'                          => 'required',
                'cpf'                           => 'required|unique:clientes,cpf',
                'rg'                            => 'required',
                'dt_nascimento'                 => 'required',
                'tp_contribuinte'               => 'required',
                'tel_comercial'                 => 'required',
                'tel_celular'                   => 'required',
                'email'                         => 'required',
                'site'                          => 'required',
                'address_cep'                   => 'required',
                'address_full'                  => 'required',
                'address_number'                => 'required',
                'address_complement'            => 'required',
                'address_district'              => 'required',
                'address_city'                  => 'required',
                'address_uf'                    => 'required',
            ];
        } else {

Criador Rodrigo Pais 02/10/2020

{
            return [
                'tp_cliente'                    => 'required',
                'status_id'                     => 'required',
                'name_fantasia'                 => 'required',
                'name_razao'                    => 'required',
                'cnpj'                          => 'required|unique:clientes,cnpj',
                'ie'                            => 'required',
                'im'                            => 'required',
                'is'                            => 'required',
                'tp_contribuinte'               => 'required',
                'responsavel'                   => 'required',
                'tel_comercial'                 => 'nullable',
                'tel_celular'                   => 'required',
                'email'                         => 'required',
                'site'                          => 'required',
                'address_cep'                   => 'required',
                'address_full'                  => 'required',
                'address_number'                => 'required',
                'address_complement'            => 'required',
                'address_district'              => 'required',
                'address_city'                  => 'required',
                'address_uf'                    => 'required',
            ];
        }

Criador Rodrigo Pais 02/10/2020

public function messages()
    {
        return [
            'required'                          => 'Preenchimento obrigatório!',
            'min'                               => 'Minimo de :min caracteres',
            'max'                               => 'Máximo de :max caracteres',
            'numeric'                           => 'Somente número!'
        ];
    }

Criador Rodrigo Pais 02/10/2020

Campos comum as 2 tipos de cadastro.

<div class="row">
                                <div class="col-12 col-md-2">
                                    <div class="form-group">
                                        <label>Telefone Comercial</label>
                                        <input name="tel_comercial" type="text"
                                            class="form-control @error('tel_comercial') is-invalid @enderror"
                                            value="{{ $dados->tel_comercial ?? old('tel_comercial') }}">
                                        @error('tel_comercial')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>

Criador Rodrigo Pais 02/10/2020

<div class="col-12 col-md-2">
                                    <div class="form-group">
                                        <label>Telefone Celular</label>
                                        <input name="tel_celular" type="text"
                                            class="form-control @error('tel_celular') is-invalid @enderror"
                                            value="{{ $dados->tel_celular ?? old('tel_celular') }}">
                                        @error('tel_celular')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>

Criador Rodrigo Pais 02/10/2020

<div class="col-12 col-md-4">
                                    <div class="form-group">
                                        <label>E-mail</label>
                                        <input name="email" type="email"
                                            class="form-control @error('email') is-invalid @enderror"
                                            value="{{ $dados->email ?? old('email') }}" autocomplete="email" autofocus>
                                        @error('email')
                                        <div class="invalid-feedback" role="alert">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>

Criador Rodrigo Pais 02/10/2020

<div class="col-12 col-md-4">
                                    <div class="form-group">
                                        <label>Site</label>
                                        <input name="site" type="text"
                                            class="form-control @error('site') is-invalid @enderror"
                                            value="{{ $dados->site ?? old('site') }}">
                                        @error('site')
                                        <div class="invalid-feedback" role="alert">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

Criador Rodrigo Pais 02/10/2020

Segue print da situação.

Quando os campos do tipo de cliente estão vazios.

https://imgur.com/a/HQMuKWx

Quando eu troco para PJ os campos que são comum a todos ficam com a msg de erro da validação, tem como quando trocar ela "limpar" e ser revalidada? Já procurei algum material e nao achei.

https://imgur.com/ZaB6ZWQ

Criador Rodrigo Pais 02/10/2020

Eu até pensei um duplicar os campos, porém vai ficar uma bacalhau danado....

Manager Carlos Ferreira 02/10/2020

Olá, amigo!

Posta o código no GitHub quando for assim, porque fica mais fácil de ler.

Usando jQuery em 2020? Eita rs
Vamos para o Vue hehehe, vc vai se apaixonar no Vue (pode apostar comigo meu amigo).

Alternativa 1: Você pode usar o próprio jQuery para remover os alerts (todos) logo após alternar de tab PFIS para PJUR.

Alternativa 2: Pode deixar os alerts (acho viável para servir como "advertência" para o usuário do erro cometido ao não preencher corretamente o campo) E quando digital alguma coisa no campo (evento change) remover o alert.

Criador Rodrigo Pais 02/10/2020

Professro, qual a possibilidade de criar algo assim no Larafood? Uma aula adicional?

Manager Carlos Ferreira 02/10/2020

No LaraFood acho que não encaixa no projeto atual.

Mas, posso anotar aqui para se tornar futuramente uma aula extra no canal.

Mas, minha recomendação hj para você é que aprenda o Vue.js, uma vez que dominar ele dificilmente vai querer saber de jQuery.

Criador Rodrigo Pais 02/10/2020

Ok, muito obrigado!