Laravel中的Bootstrap模态验证

塞巴斯蒂安·M

我有一个注册模式，可以在单击时打开。输入是使用required等在视图上验证的。此外，还有其他字段（也在其他模式中，我没有提到），在这些字段中我再次验证了控制器中的规则。

我读过一种验证模态的好方法是使用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>

当我提交时，模式关闭并且什么也没有发生。如果我再次单击“注册”，则显示模式并显示错误。

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

d33k4y

据我了解，您正在正常提交表单，这将重新加载页面。因此，在页面重新加载后，您需要再次单击“注册”以打开模式，该模式可以正确显示任何错误。

如果您希望以这种方式正常提交表单，则在出现任何错误时，您必须自动（使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。