如何使用 jQuery Ajax 验证 Laravel 表单答案

【问题标题】：How to Validate a Laravel Form Using jQuery Ajax如何使用 jQuery Ajax 验证 Laravel 表单
【发布时间】：2019-04-27 20:06:03
【问题描述】：

我正在尝试通过 jQuery/Ajax 验证 Laravel 表单。我有两个表单字段：“电子邮件”和“联系人”。如果有人输入电子邮件并且它已经注册，那么它将显示“电子邮件 ID 已注册”。和接触一样。我已经在 PHP 中完成了。但是，它在视图中不起作用。

register.blade.php

<form method="POST" action="{{ route('register') }}" id="Frm_sign" name="Frm_sign">
    {{csrf_field()}}
    <div class="form-group col-md-6 col-sm-6">
        <label for="arrival">Contact No*</label>
        <input type="text" class="form-control input-sm required digits" id="contact" name="contact"
               value="{{ old('contact') }}" placeholder="">
    </div>

    <div class="form-group col-md-6 col-sm-6">
        <label for="arrival">Email id*</label>
        <input type="text" class="form-control input-sm email required" id="email" name="email"
               value="{{ old('email') }}" placeholder="">
    </div>

    <div class="col-md-12 col-sm-12">
        <div class="form-group col-md-3 col-sm-3 pull-right">
            <input type="submit" class="btn btn-primary" value="Submit" name="submit"/>
        </div>
    </div>
</form>

<!-- form validation -->
<script type="text/javascript">
    $(document).ready(function () {
// - validation
        if ($('#Frm_sign').length > 0) {
            $('#Frm_sign').validate({
                rules: {
                    email: {
                        remote: {
                            url: "{{url("varifyemail")}}",
                            type: "GET",
                            data: {
                                action: function () {
                                    return "1";
                                },
                            }
                        }
                    },
                    contact: {
                        maxlength: 10,
                        minlength: 10,
                        remote: {
                            url: "{{url("varifycontact")}}",
                            type: "GET",
                            data: {
                                action: function () {
                                    return "2";
                                },
                            }
                        }
                    },
                    password: {
                        equalTo: "#repass"
                    }
                },
                messages: {
                    email: {
                        remote: "Email id already registred"
                    },
                    contact: {
                        remote: "Mobile number already registred",
                        maxlength: "Please enter valid mobile number",
                        minlength: "Please enter valid mobile number"
                    },
                    password: {
                        equalTo: "Password is not equal"
                    }
                },

                submitHandler: function (form) {

                    form.submit();
                },
                errorPlacement: function (error, element) {
                    error.appendTo(element.parent());
                }
            });
        }
    });
</script>

在 Ajax 中，也有密码，但它可以工作，所以我没有在这里写密码字段。

路线

Route::get('varifyemail','Auth\RegisterController@varifyemail');
Route::get('varifycontact','Auth\RegisterController@varifycontact');

注册控制器

public function varifyemail(Request $request)
{
    $email1 = User::where('email', $request->email)->get();
    if($email1->email > 0)
    {
        echo json_encode(false);
    } else {
        echo json_encode(true);
    }
}

public function varifycontact(Request $request)
{
    $contact1 = User::where('contact', $request->contact)->get();
    if($contact1->contact > 0)
    {
        echo json_encode(false);
    } else { 
        echo json_encode(true);
    }
}

【问题讨论】：

你能描述什么“不工作”吗？ jQuery 插件是否发送了验证请求？

标签： php laravel laravel-5 laravel-routing

【解决方案1】：

rules: {
    email: {
        remote: {
            url: "{{url("varifyemail")}}",
            type: "get",
            data: {
/*email was the action and it will be sent as request key name*/  
            email: function() {
                    return $( "#email" ).val(); //your email field
                }
            }
        }
    }
}

您没有为您的varifyemail 请求提供任何值和错误的操作键名称。

注意在这种情况下最好使用POST 而不是GET

来自文档的示例：jQuery Validation Remote Metode

同时覆盖您的联系代码

【讨论】：

感谢您的回复。我使用 POST 而不是 GET。但是在 RouteCollection.php 第 251 行出现错误（1/1）MethodNotAllowedHttpException
即使我在两条路线中都替换了 ROUTE::GET
Route::post -> for post request Route::get -> for get request MethodNotAllowedHttpException in RouteCollection.php 发生是因为您发送了错误的请求。

【解决方案2】：

您实际上可以使用 ajax 发布表单并从 php 服务器获取结果。由于您的验证已经开始工作，您只需检查返回的响应是否有错误。如果出现错误，您可以将其输出到屏幕上（例如，循环遍历响应中的所有错误）。

代码如下所示：

$.ajax(method: "POST",
    url: "/your/endpoint",
    data: { email: "theemail", contact: "thecontact" }
})
 .done(function(res) { console.log('Success ' + res); })
 .fail(function(jqXHR, textStatus) { console.log('Validation failed ' + textStatus); });

【讨论】：