javascript - 使用 Ajax 和 Bootstrap Modal 问题的 Laravel 表单验证

Question

我有 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 Controller 的一部分:

    $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 ) after argument list } : 在 JS 代码的最后一行
• 我的 JS 函数 $('#passUpdate').submit 也从未被调用。

注意 Laravel 正确返回 JSON 响应。

更新 我已经修复了问题的第一部分，现在我的表单已提交并收到 JSON 响应，但表单验证不起作用，错误未显示在模态上。

Answer 1

您错过了 foreach 的 ):

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);
    });
}

注意上面的倒数第二行。

});