如何使用 jQuery Ajax 验证 Laravel 表单

Question

我正在尝试通过 jQuery/Ajax 验证 Laravel 表单。我有两个表单字段：'email' 和 'contact.' 如果有人输入电子邮件并且它已经注册，那么它将显示 "Email id already registered"。和接触一样。我已经在 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);
    }
}

Answer 1

您实际上可以 post 使用 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); });

Answer 2

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

同时覆盖您的联系代码

如何使用 jQuery Ajax 验证 Laravel 表单

How to Validate a Laravel Form Using jQuery Ajax

php

laravel

laravel-routing

laravel-5