8
respostas

Validação client-side com o Laravel

Galera,

Sou novo no Laravel, gostaria de saber se existe a possibilidade de validação dos campos utilizando JavaScript ou jQuery?

Pois reduziria bastante o número de requisições ao servidor para validações simples, mas claro, farei as validações do lado do servidor também.

Vi até que existe a possibilidade de usar o JSValidation, mas não consegui usá-lo, de acordo com o que li, não precisaria repetir as validações da Request, pois o mesmo utilizaria as mesmas regras, facilitando muito o trabalho.

Estou utilizando o Laravel 5.4

Muito obrigado, Leonardo Brito

8 respostas

Para validação client-side no Laravel 5.4 eu recomendo estudar o VueJS, especificamente o Vee-validate https://www.npmjs.com/package/vee-validate

Ou usar um jQuery de sempre https://www.npmjs.com/package/jquery-validation

Obrigado pelas dicas Ricardo, vou estudar!!!

Analiando o Vue.js, terei que criar os componentes usando javascript ou tem como só usar a parte de validação.

Você pode aplicar direto em um blade template, por exemplo:

<div class="column is-12">
    <label class="label" for="email">Email</label>
    <p :class="{ 'control': true }">
        <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
        <span v-show="errors.has('email')" class="help is-danger">{!! errors.first('email') !!}</span>
    </p>
</div>

JS

export default {
    name: 'basic-example'
};

Além de já ter carregado o VueJS

  <script src="{!! mix('vue.js') !!}"></script>
  <script src="{!! mix('vee-validate.js') !!}"></script>
  <script>
    Vue.use(VeeValidate); 
  </script>

Minha resposta te ajudou? Dá um retorno ou marca como solução? Obrigado!

Não consegui usar essas duas importações juntas

  <script src="{!! mix('vue.js') !!|"></script>
  <script src="{!! mix('vee-validate.js') !!}"></script>`

No servidor só carrega um dos arquivos e não os dois, não entendi o que ocorre.

É necessário instalar o Mix https://laravel.com/docs/5.4/mix para usar os assets compilados dessa forma {!! mix('arquivo') !!}.

Outra forma de usar é {!! asset('pasta/outrapasta/js/vue.js') !!} (basta você seguir o caminho relativo à pasta JS que estaria dentro de /public

Por fim, o outro jeito é fazer um link direto ao arquivo com a tag <script src="caminho/absoluto/arquivo.js">.

Reparei que no meu exemplo estava {!! mix('vue.js') !!| (repare a | errada ali, o correto é } fechando o trecho). Já corrigi, veja se o seu está assim também.

O | já tinha notado e corrigi, mas não tinha ativado o mix como você sugeriu, vou tentar mais tarde, qualquer coisa aviso aqui.