使用Ajax和Bootstrap模式问题进行Laravel表单验证

时间:2015-04-25 10:22:59

标签: javascript jquery ajax twitter-bootstrap laravel

我'获得了Bootstrap Modal,允许用户更新他的密码:

    <div class="modal fade" id="settingModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Change Password</h4>
            </div>
            {!! Form::open(array('url' => '/users/updatePassword', 'method' => 'POST', 'id'=>'passUpdate')) !!}
            <div class="modal-body">
                @if(Session::has('error'))
                    <div class="alert-box success">
                        <h2>{{ Session::get('error') }}</h2>
                    </div>
                @endif

                <div id="password-group" class="form-group has-feedback @if ($errors->has('password')) has-error @endif">
                    {!! Form::password('password', array('id'=>'password', 'class' => 'text input form-control', 'placeholder'=>'New Password')) !!}
                    <span class="glyphicon glyphicon-lock form-control-feedback @if ($errors->has('password')) has-error @endif"></span>
                    @if ($errors->has('password')) <p class="help-block">{{ $errors->first('password') }}</p> @endif
                    <div id ="password_error"></div>
                </div>

                <div id="password_confirmation-group" class="form-group has-feedback @if ($errors->has('password_confirmation')) has-error @endif">
                    {!! Form::password('password_confirmation', array('id'=>'password_confirmation', 'class' => 'text input form-control', 'placeholder'=>'Confirm New Password')) !!}
                    <span class="glyphicon glyphicon-lock form-control-feedback @if ($errors->has('password_confirmation')) has-error @endif"></span>
                    @if ($errors->has('password_confirmation')) <p class="help-block">{{ $errors->first('password_confirmation') }}</p> @endif
                    <div id ="password_confirm_error"></div>
                </div>
            </div>

            <div class="modal-footer clearfix">
                <button type="button" class=" pull-left btn btn-default btn-flat" data-dismiss="modal">Close</button>
                {!! Form::submit('Submit', array('class'=>' pull-right btn btn-primary btn-flat'))!!}
            </div>
            {!! Form::close()!!}

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这是我的JS代码:

<script type="text/javascript">

$('#passUpdate').submit(function(e){
    var $form = $(this);

    e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
    var url = $form.attr('action');
    var formData = {};
    //submit a POST request with the form data
    $form.find(':input').each(function()
    {
        formData[ $(this).attr('name') ] = $(this).val();
        console.log($(this).val());
    });
    console.log('Before Submit');
    //submits an array of key-value pairs to the form's action URL
    $.post(url, formData, function(response) {
        //handle successful validation
        console.log("Success");
    }).fail(function(response) {
        //handle failed validation
        console.log("Failed");
        associate_errors(response['errors'], $form);
    });

});

function associate_errors(errors, $form)
{
    //remove existing error classes and error messages from form groups
    $form.find('.form-group').removeClass('has-errors').find('.help-text').text('');
    errors.foreach(function(value, index)
    {
        //find each form group, which is given a unique id based on the form field's name
        var $group = $form.find('#' + index + '-group');

        //add the error class and set the error text
        $group.addClass('has-errors').find('.help-text').text(value);
    }
}

这是我的laravel控制器的一部分:

    $validator = Validator::make($data, $rules);
    if ($validator->fails()){
        // If validation fails redirect back to login.
        return Response::json(array(
            'fail' => true,
            'errors' => $validator->getMessageBag()->toArray()
        ));
    }

所以我遇到了这个问题:

  • 在firebug控制台中我得到:SyntaxError:missing)在参数列表之后}:在JS代码的最后一行
  • 我的JS函数 $(&#39; #passUpdate&#39;)。submit 永远不会被调用。

NB Laravel正确返回JSON响应。

更新我已修复问题的第一部分,现在我的表单已提交并且已收到JSON响应,但表单验证无效,错误未显示在模态上。

1 个答案:

答案 0 :(得分:2)

您错过了)的{​​{1}}:

foreach

注意上面的第二行。

  

});