php - Laravel 中的 Bootstrap 模态验证

Question

我有一个注册模式，点击即可打开。使用 required 等在 View 上验证输入。问题是，我在 Controller 中再次验证规则的其他字段(也在其他模式中，我没有提及)。

我听说验证模式的一个好方法是使用 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>

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

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

Answer 1

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

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

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

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

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