Question

我正在尝试通过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');

RegisterController

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

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

还覆盖您的联系方式

Answer 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); });

如何使用jQuery Ajax验证Laravel表单

2 个答案: