尝试在登录框中返回登录错误消息,而不使用laravel重新编码页面


Trying to return log in error message in loginbox without reloding page using laravel

我正在尝试使用laravel框架用jquery创建一个登录框。我在拉拉维尔有一些规则,我希望它遵守这些规则。这里的代码:

    $rules = array(
        'username'    => 'required|alphaNum|min:6|max:16',
        'password' => 'required|alphaNum|min:6'
        );

它们运行良好,当您登录失败时,将运行以下代码:

    $validator = Validator::make(Input::all(), $rules);
    if ($validator->fails()) {
        return Redirect::to('index')
        ->withErrors($validator)
        ->withInput(Input::except('password'));

问题是,当按下按钮调用时,登录框会弹出,当我重定向到另一个页面时,这就成了一个问题,因为错误消息写在登录框中。这很好,但是我无法在重定向后自动弹出登录框,所以你必须再次单击登录按钮才能看到错误消息,然后重试。

这是我使用的jQuery:

$(function(){
  $('#loginform').submit(function(e){
    return false;
  });
    $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});

这是HTML登录表单:

<div id="loginmodal" style="display:none;">
    <h1>Logga in</h1>
    {{ Form::open(array('url' => 'login')) }}
    <p>
        {{ $errors->first('username') }}
        {{ $errors->first('password') }}
    </p>
    <div class="row">
        <div class="col-md-12">
            {{ Form::label('username', 'Username', array('class' => 'label')) }}
            {{ Form::text('username', Input::old('username'), array('placeholder' => 'BTH Akronym',
            'class' => 'textfield',
            'id' => 'login-margin',
            )) 
        }}
    </div>
    <div class="col-md-12">
        {{ Form::label('password', 'Password', array('class' => 'label')) }}
        {{ Form::password('password', array('placeholder' => 'Lösenord',
        'class' => 'textfield'
        )) }}
    </div>
</div>
<div class="center">
    {{ Form::submit('Logga in', array('class' => 'login-knapp')) }}
</div>
{{ Form::close() }}
</div>

这是未经测试的,但类似的东西应该适用于您。。。

PHP

if ($validator->fails()) {
    if(Request::ajax()) {
        return Response::json($validator->getMessages());
    } else {
        return Redirect::to('index')->withErrors($validator)->withInput(Input::except('password'));
    }
}

这里的想法是,如果请求是ajax请求,它只会返回一些json,我们可以在模板上的ajax请求的成功函数中使用它。

jQuery

$("#form").submit(function(e) {
    $.ajax({
        type: "POST",
        url: "{{ route('ajax.form_submit') }}",
        data: $("#form").serialize(), // serializes the form's elements.
        success: function(data) {
            if(data.length > 0) {
                console.log(data); // Can set your messages on your modal.
                e.preventDefault(); // Stop the form from submitting.
            }
        }
    });
});

如果有任何错误消息,它会将它们记录到控制台,并让您了解还需要做什么。如果没有错误消息,它应该继续提交表单。

$validator->fails()上,我可能会在那里放一个else来表示成功,它实际上会让用户登录。这样,因为如果成功尝试,函数会运行两次(一次通过ajax,一次通过实际提交的表单),所以它不必再次运行验证器或检查数据库(我假设你已经在这些上设置了过滤器,所以如果用户登录,它就不会运行)。