Laravel 中的 Bootstrap 模态验证

Bootstrap modal validation in Laravel

提问by Sebastian M

I have a registrarion modal which opens on click. The inputs are validated on the view using required, etc. Thing is, there are other fields (also in other modals I'm not mentionig) in which I validate again rules in my controller.

我有一个点击打开的注册模式。使用required等在视图上验证输入。事实是，还有其他字段（也在其他模式中我没有提到），我在控制器中再次验证规则。

I've read that a good way of validating modals is using AJAX. I'm having a hard time with that.

我读过验证模态的一种好方法是使用 AJAX。我很难做到这一点。

This is a simplified verstion of my registration modal which is submitted without javascript or others:

这是我的注册模式的简化版本，它是在没有 javascript 或其他情况下提交的：

<div id="RegisterModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
 aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
            <h4 class="modal-title" id="myModalLabel">Register</h4>
        </div>

        <form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
            {!! csrf_field() !!}

            <div class="modal-body">

                <div class="form-group{{ $errors->has('first_name') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">First name</label>

                    <div class="col-md-6">
                        <input type="text" class="form-control" name="first_name"
                               value="{{ old('first_name') }}">
                    </div>
                </div>

                <div class="form-group{{ $errors->has('last_name') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">Last name</label>

                    <div class="col-md-6">
                        <input type="text" class="form-control" name="last_name"
                               value="{{ old('last_name') }}">
                    </div>
                </div>

                <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">E-Mail Address</label>

                    <div class="col-md-6">
                        <input type="email" class="form-control" name="email"
                               value="{{ old('email') }}">
                    </div>
                </div>

                <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">Password</label>

                    <div class="col-md-6">
                        <input type="password" class="form-control" name="password">
                    </div>
                </div>

                <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">Confirm Password</label>

                    <div class="col-md-6">
                        <input type="password" class="form-control" name="password_confirmation">
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <div class="form-group">
                    <div class="col-md-6 col-md-offset-2">
                        <button name="RegisterButton" type="submit" class="btn btn-primary">
                            <i class="fa fa-btn fa-user"></i> Register
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

When I submit, the modal closes and nothing happens. If I click on "register" again, the modal shows with the errors showing.

当我提交时，模态关闭，没有任何反应。如果我再次单击“注册”，则模态显示并显示错误。

Could someone help me out? Point me in the right direction?

有人可以帮我吗？指出我正确的方向？

回答by d33k4y

As far as I understand this, you're submitting your form normally, which reloads the page. So after the page reloaded, you need to click on "register" again, to open the modal, which correctly shows any errors.

据我了解，您正在正常提交表单，这会重新加载页面。所以页面重新加载后，你需要再次点击“注册”，打开模态，它正确地显示了任何错误。

If you want to submit the form normally like this, you have to reopen the modal automatically (using Javascript), if there's any error. You can open a modal like this:

如果您想像这样正常提交表单，则必须自动重新打开模态（使用 Javascript），如果有任何错误。您可以像这样打开一个模态：

$('#modal').modal({show: true});

I hope I understood your problem correctly.

我希望我正确理解了你的问题。

EDIT 1: to open the modal if there is an error, use the following code:

编辑 1：如果有错误打开模态，请使用以下代码：

@if(Session::has('errors'))
<script>
$(document).ready(function(){
    $('#modal').modal({show: true});
}
</script>
@endif

EDIT 2: To submit the form via AJAX and display the errors in the modal directly:

编辑 2：通过 AJAX 提交表单并直接在模态中显示错误：

<?php

public function register()
{
    ...

if($Validator->fails())
{
    $json = new stdClass();
    $json->success = false;
    $json->errors = $Validator->errors();
}
else
{
    $json = new stdClass();
    $json->success = true;
}

return Response::json($json);
}

?>


<script>
$('#registerForm').submit(function(){

var url = {{ route('myRegisterRoute') }};
var data = $('#registerForm').serialize();

$.post(url, data, function(response){
    if(response.success)
    {
        // Print success message and close modal
    }
    else
    {
        $('#registerForm errorList').html(JSON.stringify(response.errors));
    }
});

// return false to stop the normal submission
return false;
});
</script>