Laravel中的引导模态验证

Question

我有一个注册模式，点击打开。在视图上使用所需的等验证输入。问题是，还有其他字段(也在其他模态中，我没有提到)，我在我的控制器中再次验证规则。

我读到过验证模态的一个好方法是使用AJAX。

这是我的注册模式的简化版本，没有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>

当我提交时，模态关闭，什么也没发生。如果我再次点击"register"，模态显示错误。

有人能帮我一下吗?给我指个正确的方向?

Answer 1

据我所知，您正在正常提交表单，这将重新加载页面。所以在页面重新加载后，你需要点击注册同样，打开模态，它会正确显示任何错误。

如果你想像这样正常提交表单，如果有任何错误，你必须自动重新打开模式(使用Javascript)。你可以像这样打开一个模态:

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

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

EDIT 1:如果出现错误，使用以下代码打开模式:

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

编辑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>