Laravel 8: How to use Sweet Alert messages for error reporting of forms

问题

I have a login blade which contains a form:

       <form method="POST" action="{{ route('login') }}">
            @csrf
            <div class="field">
                <span class="fas fa-user"></span>
                <input type="email" name="email" required>
                <label style="right:0;" class="BFarnaz">Email</label>
                @error('email')
                    alert()->success('{{ $message }}','message')->persistent('Ok');
                @enderror
            </div>
            <div class="field">
                <span class="fas fa-lock"></span>
                <input type="password">
                <label style="right:0;" class="BFarnaz">Password</label>
                @error('password')
                    alert()->success('{{ $message }}','message')->persistent('Ok');
                @enderror
            </div>
            <button class="BJadidBold">Login</button>
        </form>

I have also installed the Sweet Alert package successfully and now I want to use it for showing errors of forms to user:

@error('password')
    alert()->success('{{ $message }}','message')->persistent('Ok');
@enderror

But this way is wrong, and unfortunately I don't know what is the correct way of doing this...

So if you know the proper way, please help me out.

Thanks in advance.

回答1:

I am not sure if you have sweet alert pulled in via NPM and available via CDN, pulled and copied via npm, or compiled via webpack. I am going for the sake of this example just use the CDN.

First, include the CDN into your project so it's available.

You can do this in your master blade file or you can push it via @push('scripts_stacked') and having @stack('scripts_stacked') in your master blade to receive the pushed scripts.

Let's go with adding @push('scripts_stacked') to your master.blade.php or whatever our master blade exteding from is name file like this:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        ...
    </head>
    <body>

        ...


        @yield('body')


        ...


        @stack('footer_scripts_stacked')
    </body>
</html>

Once you have it so the master blade file you are extending from can recieve stacked JS you can proceed in your blade file you are working with using the following:

@push('scripts_stacked')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
@endpush

@if (session('message'))
    @push('scripts_stacked')
        <script type="text/javascript">
            $(function() {
                {{-- Toast Example --}}
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 5000,
                    timerProgressBar: true,
                    onOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                });
                Toast.fire({
                    icon: 'info',
                    title: '{{ session('message') }}',
                })

                {{-- Regular SWAL2 Example --}}
                Swal.fire({
                    title: 'Hey!',
                    text: '{{ session('message') }}',
                    icon: 'info',
                    confirmButtonText: 'Okay'
                })
            });
        </script>
    @endpush
@endif

@if (session('success'))
    @push('footer_scripts_stacked')
        <script type="text/javascript">
            $(function() {
                {{-- Toast Example --}}
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 5000,
                    timerProgressBar: true,
                    onOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                });
                Toast.fire({
                    icon: 'success',
                    title: '{{ session('success') }}',
                })

                {{-- Regular SWAL2 Example --}}
                Swal.fire({
                    title: 'Success!',
                    text: '{{ session('success') }}',
                    icon: 'success',
                    confirmButtonText: 'Okay'
                })
            });
        </script>
    @endpush
@endif

@if (session('error'))
    @push('footer_scripts_stacked')
        <script type="text/javascript">
            $(function() {
                {{-- Toast Example --}}
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 5000,
                    timerProgressBar: true,
                    onOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                });
                Toast.fire({
                    icon: 'error',
                    title: '{{ session('error') }}',
                })

                {{-- Regular SWAL2 Example --}}
                Swal.fire({
                    title: 'Error!',
                    text: '{{ session('error') }}',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                })
            });
        </script>
    @endpush
@endif

来源：https://stackoverflow.com/questions/64732894/laravel-8-how-to-use-sweet-alert-messages-for-error-reporting-of-forms

标签

php

laravel

sweetalert

sweetalert2

laravel-8