Показать ошибки в модальном ajax

Question

Я новичок в ajax, и я хочу отображать ошибки в моем модальном формате. Я использую Laravel

Это мое лезвие

> надстройку store.blade.php

<div class="pull-right"> 
    <button class="btn btn-success btn-outline" data-toggle="modal" data-target="#addBtn">+Add a new Store</button> 
    <div id="addBtn" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h5 class="modal-title" id="myModalLabel">Add A New Store</h5> 
       </div> 
       <div class="modal-body"> 
        <form> 
         <div class="form-group"> 
          <label class="control-label mb-10">Full Name</label> 
          <input type="text" class="form-control" name="name" id="name" placeholder="John Doe"> 
         </div> 

         <div class="form-group"> 
          <label class="control-label mb-10">Email</label> 
          <input type="email" class="form-control" name="email" id="email" placeholder=""> 
          <p class="error text-center alert alert-danger hidden"> 
         </div> 

         <div class="form-group"> 
          <label class="control-label mb-10">Password</label> 
          <input type="password" class="form-control" name="password" id="password" placeholder=""> 
         </div> 

         <div class="form-group"> 
          <label class="control-label mb-10">Designate Store</label> 
          <select class="form-control" name="store_id" id="store_id"> 
          </select> 
         </div> 

        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-success waves-effect" data-dismiss="modal" id="save">Save</button> 
        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button> 
       </div> 

      </div> 
      <!-- /.modal-content --> 
     </div> 
    </div> 
</div> 

мой сценарий в конце страницы

<script> 
    var urlAdd = '{{ route('addSocialWorker') }}'; 
    var token = '{{ Session::token() }}'; 

    $("#save").click(function (e) { 
     e.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      url: urlAdd, 
      data: { 
       'name': $('#name').val(), 
       'email': $('#email').val(), 
       'password': $('#password').val(), 
       'store_id': $("#store_id").val(), 
       '_token': token 
      }, 
      success: function (data) { 
       if ((data.errors)) { 
        console.log(data); 
       } else { 
        $('#usersTable').append(data); 
       } 
      }, 
     }); 
    }); 
</script> 

AdminController. php

public function addSocialWorker(Request $request) 
{ 
    $rules = [ 
     'name'  => 'required|max:255', 
     'email' => 'required|email|unique:users', 
     'password' => 'required|min:4', 
     'store_id' => 'required|numeric', 
    ]; 

    $validator = Validator::make(Input::all(), $rules); 

    if ($validator->fails()) { 
     return Response::json([ 
      'errors' => $validator->getMessageBag()->toArray(), 
     ]); 
    } else { 
     $data = new User(); 
     $data->name = $request->name; 
     $data->email = $request->email; 
     $data->password = $request->password; 
     $data->status = 1; 
     $data->role_id = 2; 
     $data->store_id = $request->store_id; 
     $data->save(); 

     return response()->json($data); 
    } 
} 

с подтверждением выше. Я действительно новичок в ajax и jquery. У вас есть идеи, как отображать ошибки в модальном?

Answer 1

Во-первых, вы можете очистить ваш контроллер совсем немного:

public function addSocialWorker(Request $request) 
{ 
    $this->validate($request, [ 
     'name'  => 'required|max:255', 
     'email' => 'required|email|unique:users', 
     'password' => 'required|min:4', 
     'store_id' => 'required|numeric', 
    ]); 

    $data = new User(); 
    $data->name = $request->name; 
    $data->email = $request->email; 
    $data->password = $request->password; 
    $data->status = 1; 
    $data->role_id = 2; 
    $data->store_id = $request->store_id; 

    return response()->json($data); 
} 

С выше, вы не должны будете вручную проверить, если проверка проходит или нет, он будет также отправить ответ с правильным Статус HTTP (422).

Вам необходимо добавить метод error к вашему вызову ajax, чтобы вы могли фактически поймать ошибку, поскольку success не будет вызываться при ошибке.

success: function (data) { 
    $('#usersTable').append(data); 
}, 
error: function (res) { 

    if (res.status == 422) { 
     var data = res.responseJSON; 

     for (let i in data) { 
      console.log(i, data[i][0]) 
     } 
    } 
} 

Тогда, если вы хотите, чтобы показать ошибки, которые вы могли бы что-то вроде:

<form> 
    <div class="form-group" id="form-group-name"> 
     <label class="control-label mb-10">Full Name</label> 
     <input type="text" class="form-control" name="name" id="name" placeholder="John Doe"> 
     <span class="help-block"></span> 
    </div> 

    <div class="form-group" id="form-group-email"> 
     <label class="control-label mb-10">Email</label> 
     <input type="email" class="form-control" name="email" id="email" placeholder=""> 
     <span class="help-block"></span> 
     <p class="error text-center alert alert-danger hidden"> 
    </div> 

    <div class="form-group" id="form-group-password"> 
     <label class="control-label mb-10">Password</label> 
     <input type="password" class="form-control" name="password" id="password" 
       placeholder=""> 
     <span class="help-block"></span> 
    </div> 

    <div class="form-group" id="form-group-store_id"> 
     <label class="control-label mb-10">Designate Store</label> 
     <select class="form-control" name="store_id" id="store_id"> 
      <option value="1">One</option> 
      <option value="2">Two</option> 
     </select> 
     <span class="help-block"></span> 
    </div> 

</form> 

//

<script> 
    $(document).ready(function() { 

     function showValidationErrors(name, error) { 

      var group = $("#form-group-" + name); 
      group.addClass('has-error'); 
      group.find('.help-block').text(error); 
     } 

     function clearValidationError(name) { 
      var group = $("#form-group-" + name); 
      group.removeClass('has-error'); 
      group.find('.help-block').text(''); 
     } 

     $("#name, #email, #password").on('keyup', function() { 
      clearValidationError($(this).attr('id').replace('#', '')) 
     }); 
     $("#store_id").on('change', function() { 
      clearValidationError($(this).attr('id').replace('#', '')) 
     }); 

     $("#save").click(function (e) { 
      e.preventDefault(); 
      $.ajax({ 
       type: 'POST', 
       url: '{{ route('addSocialWorker') }}', 
       data: { 
        'name': $('#name').val(), 
        'email': $('#email').val(), 
        'password': $('#password').val(), 
        'store_id': $("#store_id").val(), 
        '_token': '{{ Session::token() }}' 
       }, 
       success: function (data) { 
        console.log(data, 'I am the success method') 
       }, 
       error: function (res) { 

        if (res.status == 422) { 
         var data = res.responseJSON; 

         for (let i in data) { 
          showValidationErrors(i, data[i][0]) 
         } 
        } 
       } 
      }); 
     }); 
    }); 
</script> 

Надеется, что это помогает!

Answer 2

Сначала вам нужно создать класс в своем модальном теле - назовем его ошибками и поместите его на самом дне в модальном теле. Здесь будут возникать ошибки.

<div class="errors"></div> 

Если данные правильно отправить из контроллера, то вам необходимо в цикле каждая ошибка (в функции успеха). (Классы оповещения об опасности, являются бутстраповскими классами, вы можете удалить его)

for (var i in data) { 

    $('errors').append('<div class="alert alert-danger">'+data[i].error_text+'</div>'); 

} 

ERROR_TEXT может быть разностороннего, это зависит от того, что возвращается в ответ данных. Вы можете проверить это, используя console.log (данные).