Use jQuery-Mask with Laravel

Asked

Viewed 3,789 times

-1

I’m trying to use jQuery-Mask with Laravel, but it doesn’t work. If anyone can help :)

When I look at the Chrome Console tab it gives the following error:

inserir a descrição da imagem aqui

My code is as follows (tag head):

<head>
<script src="/public/jquery-mask-plugin.js" defer></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js" integrity="sha256-u7MY6EG5ass8JhTuxBek18r5YG6pllB9zLqE4vZyTn4=" crossorigin="anonymous"></script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>N. S. de Fátima</title>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/solid.css" integrity="sha384-VGP9aw4WtGH/uPAOseYxZ+Vz/vaTb1ehm1bwx92Fm8dTrE+3boLfF1SpAtB1z7HW" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/regular.css" integrity="sha384-ZlNfXjxAqKFWCwMwQFGhmMh3i89dWDnaFU2/VZg9CvsMGA7hXHQsPIqS+JIAmgEq" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/brands.css" integrity="sha384-rf1bqOAj3+pw6NqYrtaE1/4Se2NBwkIfeYbsFdtiR6TQz0acWiwJbv1IM/Nt/ite" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css" integrity="sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7" crossorigin="anonymous">

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

Page where you have input trying to use class:

<script type="text/javascript">
    $(document).ready(function(){
        $('.date').mask('00/00/0000');
        $('.time').mask('00:00:00');
        $('.date_time').mask('00/00/0000 00:00:00');
        $('#cep').mask('00000-000');
        $('.phone').mask('0000-0000');
        $('.phone_with_ddd').mask('(00) 0000-0000');
        $('.phone_us').mask('(000) 000-0000');
        $('.mixed').mask('AAA 000-S0S');
        $('.cpf').mask('000.000.000-00', {reverse: true});
        $('.cnpj').mask('00.000.000/0000-00', {reverse: true});
        $('.money').mask('000.000.000.000.000,00', {reverse: true});
        $('.money2').mask("#.##0,00", {reverse: true});
        $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
            translation: {
                'Z': {
                    pattern: /[0-9]/, optional: true
                }
            }
        });
        $('.ip_address').mask('099.099.099.099');
        $('.percent').mask('##0,00%', {reverse: true});
        $('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true});
        $('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"});
        $('.fallback').mask("00r00r0000", {
            translation: {
                'r': {
                    pattern: /[\/]/,
                    fallback: '/'
                },
                placeholder: "__/__/____"
            }
        });
        $('.selectonfocus').mask("00/00/0000", {selectOnFocus: true});
    });
</script>

Input:

<div class="form-group">
     <label for="cep">CEP</label>
     <input id="cep" type="text" class="form-control">
     @if($errors->get('cep'))
        <p class="text-danger">Corrija este campo.</p>
     @endif </div>
php jquery laravel

  • You have to load the jQuery https://code.jquery.com/jquery-3.3.1.min.js before the plugins.

  • the error continued the same :/

  • The plugin the mask must be loaded after the jquery and without the attributes defer or async

  • yes, I tried this way too and did not roll. I have no more ideas than to do hahah

4 answers

0

Exchange that line:

$(document).ready(function(){

for 

$(document).ready(function($){

0

To work you would need to make these changes:

Change that:

<script src="{{ asset('js/app.js') }}" defer></script>

For that reason:

<script src="{{ asset('js/app.js') }}"></script>

Choose whether to use local or remote jqueryMask, and not both. And move the one you choose down the line of the jquery script, so:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js" integrity="sha256-u7MY6EG5ass8JhTuxBek18r5YG6pllB9zLqE4vZyTn4=" crossorigin="anonymous"></script>

Or so:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="/public/jquery-mask-plugin.js"></script>

Another thing, I suggested removing the "Defer" property from the scripts, in which case the ideal is to move all these scripts to the end of HTML, leaving them just above the < /BODY tag>:

  <script>...</script>
  <script>...</script>
  <script>...</script>
</body>

Or add the "Defer" property to all your scripts, including the one you defined the masks... I prefer to move everything to the end, before the tag body...

0

Try to put the script tag inside the body of your code at the end. If you are using @hasSection to check if there is a script, put it first.

Also remove the Defer staying like this:

Ex: ...

@hasSection('script_example') @Yield('script_example') @endif

-3

I needed to use this library jQuery-Mask-Plugin in Laravel, share my solution.

Form Cadastrar

 <!-- resources/views/user/create.blade.php -->
@extends('layouts.app')

@section('script')
<script>
    $(document).ready(function($){
        $('#cpf').mask('999.999.999-99');
   });
</script>
@endsection

@section('content')
<form class="form-group" action="{{ action('UserController@store', 0) }}" method="post">
    @csrf
    <div class="col-md-2">
        <label>CPF</label><br>
        <input class="form-control" id="cpf" type="text" name="cpf" required><br>
    </div>
</form>

@stop

<!doctype html>
<head>
</head>
 <!-- resources/views/layouts/app.blade.php -->
<body>
    <div id="app">
        @yield('content')
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"
        integrity="sha256-yE5LLp5HSQ/z+hJeCqkz9hdjNkk1jaiGG0tDCraumnA=" crossorigin="anonymous"></script>
    
<!-- Carrega o Script Personalizado na Página aqui -->
    @yield("script")

</body>
</html>

Browser other questions tagged php jquery laravel

You are not signed in. Login or sign up in order to post.