如何使用jQuery Ajax驗證Laravel表單

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