weixin_33724659 2019-06-11 06:38 采纳率: 0%
浏览 37

验证ajax错误

I want to make an ajax call and try to show validation messages on front end. I use a modal to make ajax call, but I can't use normal @error('name') @enderror directive so I use jQuery validator plugin, but errors occur.

I tried different things, but did not find a solution yet. Please help me.

Ajax call with validate plugin

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

        $('#create-collection-form').validate({

        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });

        $('#create-collection').click(function(event) {

            event.preventDefault();

            $.ajax({

               url: '{{ route('collections.store') }}',
               type: 'POST',
               dataType: 'json',
               data: $('#create-collection-form').serialize(),

               success: function (data) {
                   $('#create-collection-form').trigger('reset');
                   $('#createCollectionModal').modal('hide');

                   $('.collections').append('<li> ' + data.name + ' </li>');
               }

            });

        });

    });
</script>

Store method in my controller with back-end validation data

public function store(Request $request)
{
$attributes = $request->validate([
'name' => 'required|min:3',
'description' => 'nullable|min:3'
        ]);
$collection = Collection::create($attributes);

return Response::json($collection);
}

Errors:

Error image

jQuery plugin version is 3.4.1 (latest) and validator is 1.19.0, jQuery is first followed by validator plugin so I dont think that order is the problem here. Please help me, I'm stuck with this so hard! I am a beginner, and I am trying to learn ajax to make my life easier, but it seems it otherwise :)).

Why I cant use the @error directive, it will be easier.

  • 写回答

2条回答 默认 最新

  • weixin_33744141 2019-06-11 06:52
    关注

    You don't have access to the direct request in ajax and therefore you can't use @error with ajax. You should use Vuejs or change the DOM directly in the error callback:

            $.ajax({
    
               url: '{{ route('collections.store') }}',
               type: 'POST',
               dataType: 'json',
               data: $('#create-collection-form').serialize(),
    
               success: function (data) {
                   $('#create-collection-form').trigger('reset');
                   $('#createCollectionModal').modal('hide');
    
                   $('.collections').append('<li> ' + data.name + ' </li>');
               },
    
               error: function (data) {
                   // Change DOM
               }
    
            });
    
    评论

报告相同问题?

悬赏问题

  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误