Home / Questions / 91198
Accepted
Soy César Mora
Asked: 2020-07-28 19:53:40 +0800 CST 2020-07-28 19:53:40 +0800 CST

Laravel 5.4 使用 ajax 进行表单验证

  • 772

我在使用 ajax 显示表单的错误消息时遇到问题，通过传统的 http 一切顺利，但是当我通过 ajax 执行此操作时，我在表单中强制出现错误，它告诉我422 Unprocessable Entity作为响应，但它没有向我显示错误消息，就好像它是正常的 http。

如果表单没问题，继续控制器代码，我在下面放了一个响应来检查它是否被 ajax 正确接收，它确实响应了消息。

if ($request->ajax()) {
        return response()->json(['mensaje'=>'validacion pasada wey']);
    }

我重申，对于正常的 http，一切正常，它会显示相应的验证消息，例如：名称不能少于 3 个字符。

我浏览了文档并引用了这一部分： 对于传统的 HTTP 请求，将生成重定向响应，而 AJAX 请求将发送 JSON 响应。

我留下了我一直在测试响应的 ajax 代码：

$('#btn_main').on('click',function(e){
        e.preventDefault();
        var action = $('#mainform').attr('action');
        var method = $('#mainform').attr('method');

        $.ajax({
        beforeSend:function(){
            console.log('before send ok');
        },
        url: action,
        type: method,
        data: $('#mainform').serialize(),
        dataType:'json',

        success:function(respuesta){
            $.each(respuesta,function(name,value){
                console.log('name: '+ name + '\n'+ 'value: '+ value);
            });
        },

        error:function(jqXHR,estado,error){
            console.log('estado error: ' + estado);
            console.log('error de error: ' + error);
        },

        complete:function(jqXHR,estado){
            console.log('estado complete: ' + estado);
        },
        timeout:10000
        });
    });

我在控制器中验证的方式如下：

$this->validate($request,[
        'tracking' => 'min:3',
        'date' => 'min:6|required'
    ]);

我是否需要在控制器中的验证中添加一些额外的东西，以便它在 json 中给我相应的响应？

所以我显示了错误，但我想如果它给了我一个 json 响应，我将不得不用 jquery 添加它们。

@if(count($errors)>0)
    <ul class="alert alert-danger">
    @foreach($errors->all() as $error)
        <li>{{ $error }}</li>
    @endforeach
    </ul>
@endif
jquery

2 Answers

  1. 我希望它可以帮助或指导您：

               var token = '{{Session::token()}}';
            var url = '{{route('')}}';//tu ruta donde envias la info.
           var new_marca = $("#marca").val();//guardo el valor de mi input (una marca en mi caso)
                $.ajax({
                            method: 'POST',
                            url: url,
                            data: {_token: token, nombre: new_marca},
                            error: function (data) {
                                var errorsHtml = '';
                                var errors = data.responseJSON;
                                $.each(errors, function (key, value) {
                                    errorsHtml += value;
                                });
                                $("#mas_tex2").addClass('borderClass').delay(4000)
                                        .queue(function () {
                                            $(this).removeClass("borderClass");
                                            $(this).dequeue();
                                        });
                                $("#error_msg2").text(errorsHtml).show().fadeOut(4000);
                            }
                        })
                        .done(function (msg) {
                        });

    它只打印它发现的第一个错误

    <div style="color: #1eb6a7;font-weight: bold;font-size: 14px;"  hidden id="error_msg2"></div>
    • 2
  2. Best Answer

    问题不在于错误消息的生成，因为正如文档所述，它会自动返回它们。

    详细信息是消息由XHR 在 responseJSON 中到达，并向它们显示错误函数如下所示：

    error:function(jqXHR,estado,error){
      $.each(jqXHR.responseJSON,function(indice,valor){
            console.log(indice + ' - ' + valor);
      });
},
    • 0