Dev Faq
2
votes

Ajax récupérant les erreurs ne fonctionne pas Laravel

J'essaie de récupérer des erreurs lorsqu'un utilisateur remplit un formulaire soumis en utilisant ajax. Je suis ce tutoriel . Je n'obtiens pas le résultat attendu malgré la logique qui, à mon avis, devrait être juste. Voici mon code de vue lame: 

 /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $validator = Validator::make($request->all(),[
            'intitule' => 'unique:themes,intitule'
        ]);
        $theme = new Theme;
        $theme->intitule = $request->input('intitule');
        $theme->description = $request->input('description');
        $theme->categorie = $request->input('categorie');
        $request->merge([
            'filiere' => implode(',', (array) $request->get('filiere'))
        ]);
        $theme->filiereDesiree = $request->input('filiere');
        $theme->save();

        if ($validator->passes()) {


            return response()->json(['success'=>'Added new records.']);

        }


        return response()->json(['error'=>$validator->errors()->all()]);

   }

La fonction de stockage du contrôleur: 

@extends('layouts.layout')

@section('title','Soumettre thématique')
@section('content')
<body>

<div class="container_fluid">
<div class="row">
<div class="alert alert-danger print-error-msg" style="display: none;">
@if($errors->any())
<ol style="color: red">
@foreach($errors->all() as $error)
<li>
  {{$error}}
</li>
@endforeach
</ol>
@endif
</div>
</div>
</div>
    <form method="POST" action=" {{route('themes.store')}} ">
        @csrf
        <!-- Intitulé du thème -->
        <input type="text" name="intitule" id="intitule" placeholder="Intitulé du thème" required><br>
        <!-- Catégorie -->
        <select name="categorie" required>
            <option value="">-- Catégorie --</option>
            <option value="web">Développement web</option>
            <option value="appMobile">Programmation application mobile</option>
            <option value="secure">Sécurisation</option>
            <option value="other">Autre</option>
        </select> <br>
        <!-- Filière désirée -->
        <input type="checkbox" name="filiere[]" id="GL" value="GL" required>
        <label for="GL">Génie Logiciel</label><br>
        <input type="checkbox" name="filiere[]" id="SI" value="SI" required>
        <label for="SI">Sécurité Informatique</label><br>
        <input type="checkbox" name="filiere[]" id="IM" value="IM" required>
        <label for="IM">Internet et Multimédia</label><br>
        <input type="checkbox" name="filiere[]" id="SIRI" value="SIRI" required>
        <label for="SIRI">Systèmes d'Information et Réseaux Informatiques</label><br>
        <!-- Descriptif -->
        <textarea name="description" id="description" placeholder="Description de la thématique" required>{{old('description')}} </textarea><br>

        <input type="submit" name="submit" id="submit" value="Ajouter">
        <span id="error-message" class="text-danger"></span>
        <span id="success-message" class="text-success"></span>
    </form>

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function (){
            var itsChecked = null;
            $('input[type=checkbox]').on('click', function(){
                if($('input[type=checkbox]:checked').length > 0){ //S'il y a au moins 1 ([...].length > 0) ckecked
                // alert('At least one is checked');
                    $('#GL').removeAttr("required");
                    $('#SI').removeAttr("required");
                    $('#IM').removeAttr("required");
                    $('#SIRI').removeAttr("required");
                }
                else if(!$('input[type=checkbox]:checked').length > 0){ //S'il n'y a aucun checked (!(at least 1)>0)
                // alert('None is checked');
                    $('#GL').attr('required','');
                    $('#SI').attr('required','');
                    $('#IM').attr('required','');
                    $('#SIRI').attr('required','');

            }
            });

            $('#submit').on('click',function(e){
                e.preventDefault();

                var _token = $("input[name='_token']").val();
                var intitule = $("input[name='intitule']").val();
                var categorie = $("select[name='categorie']").val();
                var filiereChecked = [];
                $.each($("input[type='checkbox']:checked"), function(){            
                filiereChecked.push($(this).val());
                });
                var filiere = filiereChecked.join(", ");
                var filiere = filiere.toString();

                $.ajax({
                    url: "{{route('themes.store')}}",
                    type: 'POST',
                    data: {
                        _token:_token,
                        intitule:intitule,
                        categorie:categorie,
                        filiere:filiere
                    },
                    success: function(data){
                        if($.isEmptyObject(data.error)){
                            alert(data.success);
                        }
                        else{
                            // console.log(data.error);
                            printErrorMsg(data.error);
                        }
                    }
                });
            });


        function printErrorMsg (msg) {

            $(".print-error-msg").find("ul").html('');

            $(".print-error-msg").css('display','block');

            $.each( msg, function( key, value ) {

                $(".print-error-msg").find("ul").append('<li>'+value+'</li>');

            });

        }

        });
    </script>
</body>
@endsection

Le problème est que je ne reçois pas du tout de message , que ce soit un succès ou une erreur. Je ne sais pas où je me trompe.

P.S: J'ai déjà utilisé Ajax pour soumettre ce formulaire. Je l'ai fait en utilisant l'objet XMLHttpRequest. Le problème était que je ne sais pas comment utiliser l'état 422 pour renvoyer des erreurs en utilisant cet objet XHR. Je l'ai cherché mais je n'ai rien trouvé de vraiment utile. J'ai donc changé cette méthode pour utiliser ici la fonction jquery ajax () qui semble plus utilisée. Je ne reçois toujours pas les messages. C'est la première fois que j'essaye de gérer les erreurs de validation en utilisant Ajax. Votre aide serait la bienvenue

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser la Request de Laravel pour votre validation. 

public function authorize()
{
    return true;
}

public function rules()
{
    return [
        'intitule' => 'required|unique',
    ];
}

Contrôleur 

use App\Http\Request\ThemeCreateRequest

 public function store(ThemeCreateRequest $request)
    {
        $theme = new Theme;
        $theme->intitule = $request->input('intitule');
        $theme->description = $request->input('description');
        $theme->categorie = $request->input('categorie');
        $request->merge([
            'filiere' => implode(',', (array) $request->get('filiere'))
        ]);
        $theme->filiereDesiree = $request->input('filiere');
        $theme->save();

        if ($validator->passes()) {


            return response()->json(['success'=>'Added new records.']);

        }


        return response()->json(['error'=>$validator->errors()->all()]);

   }

App \ Http \ Request \ ThemeCreateRequest.php 

php artisan make:request ThemeCreateRequest

1 commentaires

Merci d'avoir répondu. Ne devrait-il pas être public function store (ThemeCreateRequest $ request) ? .. Je viens de l'essayer, toujours pas de message renvoyé

0
votes

Vous pouvez l'utiliser sur votre contrôleur. 

 public function store(Request $request)
    {
        $validator = \Validator::make($request->all(),[
            'intitule' => 'unique:themes,intitule'
        ]);


        if ($validator->fails()) {
           return response()->json(array('error'=>$validator->getMessageBag()->toArray(),));
        }
        $theme = new Theme;
        $theme->intitule = $request->input('intitule');
        $theme->description = $request->input('description');
        $theme->categorie = $request->input('categorie');
        $request->merge([
            'filiere' => implode(',', (array) $request->get('filiere'))
        ]);
        $theme->filiereDesiree = $request->input('filiere');
        $theme->save();

        return response()->json(array('success'=>'Added new records.',));
       }

et en javascript, essayez d'utiliser celui-ci 

                   $.ajax({
                    url: "{{route('themes.store')}}",
                    type: 'POST',
                    data: {
                        _token:_token,
                        intitule:intitule,
                        categorie:categorie,
                        filiere:filiere
                    },
                    success: function(data){
                        if(data.error){
                            printErrorMsg(data.error);
                        }
                        else{
                            alert(data.success);
                        }
                    }
                });

code ajax p > 

                    success: function(data){
                        if(data.error){
                            printErrorMsg(data.error);
                        }
                        else{
                            alert(data.success);
                        }
                    }

Contrôleur 

return response()->json(array('errors'=>$validator->getMessageBag()->toArray(),));

3 commentaires

J'ai essayé votre solution, mais je ne reçois toujours aucun message. Dois-je dire quelque chose sur le type de contenu que le serveur doit renvoyer? Je parle de cette ligne de code header ("Content-Type: text / json"); . Je l'ai écrit mais je ne sais pas si cela peut être le problème car je ne comprends toujours pas pourquoi cela ne fonctionne pas.

êtes-vous sûr que votre événement de clic fonctionne? le retour que je mets est déjà un objet et les données ajax doivent être un json / object. Peut-être rencontrez-vous une autre erreur? Désolé mais je ne sais pas quelle est l'utilisation de l'en-tête ("Content-Type: text / json"); mais je ne l'utilise pas et j'obtiens un message d'erreur et un message de réussite.

oui tu as raison, sans ça, ça marche toujours. J'ai résolu mon problème, c'était une erreur à mon avis. Je vous remercie

0
votes

Oups, c'est de ma faute ... Je viens de comprendre pourquoi cela ne fonctionnait pas. J'ai placé ceci dans ma vue de lame 

@if($errors->any())
<ol style="color: red">
@foreach($errors->all() as $error)
<li>
  {{$error}}
</li>
@endforeach
</ol>
@endif

au lieu des balises

que le code javascript recherche pour générer les erreurs. Merci à tous

0 commentaires

Articles qui pourrait vous intéresser :

Pourquoi est-ce que j'obtiens une erreur laravel lors de la création d'un nouveau projet?
Select2 ne s'affiche pas correctement dans le mode bootstrap
Laravel Echo n'écoute pas
La validation de la demande de formulaire ne fonctionne pas. Il charge juste la page d'accueil dans Postman